Filterknoten Gewicht und Änderung Attribut

Question

die Kraft gerichtet Layout verwenden, nachdem Kreise von Daten anhängen Ich versuche, den folgenden

force 
    .nodes() 
    .filter(function(d){ 
     if(d.weight==0){ 
      return d 
     }}) 
    .attr('class', 'someclass') 

Den Filter zu tun, gibt die richtige Auswahl der Knoten jedoch, wenn ich in der hinzufügen .attr('class', 'someclass') bekomme ich folgende Fehlermeldung:

Typeerror:. force.nodes (...) -Filter (...) attr ist keine Funktion

Wie anfügen ich ein Attribut basiert auf einer Filterauswahl. Knoten verwenden ihre Force-Attribute?

Danke meine Frage

Answer 1

zum Lesen Sie sollten d3 Auswahl von Knoten verwendet haben, um das Attribut zu dem gefilterten Satz von Elementen gesetzt.

node.filter(function(d){ 
     if(d.weight==0){ 
      return this 
     } 
    }) 
    .attr('class', 'someclass'); //Where node is d3 selection of nodes 

Bitte an die unten Geige beziehen. Ich habe someClass zum gefilterten Satz Knoten für kundenspezifischen Stil hinzugefügt (hier, Strichfarbe).

var width = 960, 
 
    height = 500; 
 

 
var color = d3.scale.category20(); 
 

 
var force = d3.layout.force() 
 
    .charge(-120) 
 
    .linkDistance(30) 
 
    .size([width, height]); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 

 
var graph = { 
 
    "nodes": [{ 
 
    "name": "1", 
 
    "rating": 90, 
 
    "id": 2951 
 
    }, { 
 
    "name": "2", 
 
    "rating": 80, 
 
    "id": 654654 
 
    }, { 
 
    "name": "3", 
 
    "rating": 80, 
 
    "id": 6546544 
 
    }, { 
 
    "name": "4", 
 
    "rating": 1, 
 
    "id": 68987978 
 
    }, { 
 
    "name": "5", 
 
    "rating": 1, 
 
    "id": 9878933 
 
    }, { 
 
    "name": "6", 
 
    "rating": 1, 
 
    "id": 6161 
 
    }, { 
 
    "name": "7", 
 
    "rating": 1, 
 
    "id": 64654 
 
    }, { 
 
    "name": "8", 
 
    "rating": 20, 
 
    "id": 354654 
 
    }, { 
 
    "name": "9", 
 
    "rating": 50, 
 
    "id": 8494 
 
    }, { 
 
    "name": "10", 
 
    "rating": 1, 
 
    "id": 6846874 
 
    }, { 
 
    "name": "11", 
 
    "rating": 1, 
 
    "id": 5487 
 
    }, { 
 
    "name": "12", 
 
    "rating": 80, 
 
    "id": "parfum_kenzo" 
 
    }, { 
 
    "name": "13", 
 
    "rating": 1, 
 
    "id": 65465465 
 
    }, { 
 
    "name": "14", 
 
    "rating": 90, 
 
    "id": "jungle_de_kenzo" 
 
    }, { 
 
    "name": "15", 
 
    "rating": 20, 
 
    "id": 313514 
 
    }, { 
 
    "name": "16", 
 
    "rating": 40, 
 
    "id": 36543614 
 
    }, { 
 
    "name": "17", 
 
    "rating": 100, 
 
    "id": "Yann_YA645" 
 
    }, { 
 
    "name": "18", 
 
    "rating": 1, 
 
    "id": 97413 
 
    }, { 
 
    "name": "19", 
 
    "rating": 1, 
 
    "id": 97414 
 
    }, { 
 
    "name": "20", 
 
    "rating": 100, 
 
    "id": 976431231 
 
    }, { 
 
    "name": "21", 
 
    "rating": 1, 
 
    "id": 9416 
 
    }, { 
 
    "name": "22", 
 
    "rating": 1, 
 
    "id": 998949 
 
    }, { 
 
    "name": "23", 
 
    "rating": 100, 
 
    "id": 984941 
 
    }, { 
 
    "name": "24", 
 
    "rating": 100, 
 
    "id": "99843" 
 
    }, { 
 
    "name": "25", 
 
    "rating": 1, 
 
    "id": 94915 
 
    }, { 
 
    "name": "26", 
 
    "rating": 1, 
 
    "id": 913134 
 
    }, { 
 
    "name": "27", 
 
    "rating": 1, 
 
    "id": 9134371 
 
    }], 
 
    "links": [{ 
 
    "source": 6, 
 
    "target": 5, 
 
    "value": 6, 
 
    "label": "publishedOn" 
 
    }, { 
 
    "source": 8, 
 
    "target": 5, 
 
    "value": 6, 
 
    "label": "publishedOn" 
 
    }, { 
 
    "source": 7, 
 
    "target": 1, 
 
    "value": 4, 
 
    "label": "containsKeyword" 
 
    }, { 
 
    "source": 8, 
 
    "target": 10, 
 
    "value": 3, 
 
    "label": "containsKeyword" 
 
    }, { 
 
    "source": 7, 
 
    "target": 14, 
 
    "value": 4, 
 
    "label": "publishedBy" 
 
    }, { 
 
    "source": 8, 
 
    "target": 15, 
 
    "value": 6, 
 
    "label": "publishedBy" 
 
    }, { 
 
    "source": 9, 
 
    "target": 1, 
 
    "value": 6, 
 
    "label": "depicts" 
 
    }, { 
 
    "source": 10, 
 
    "target": 1, 
 
    "value": 6, 
 
    "label": "depicts" 
 
    }, { 
 
    "source": 16, 
 
    "target": 1, 
 
    "value": 6, 
 
    "label": "manageWebsite" 
 
    }, { 
 
    "source": 16, 
 
    "target": 2, 
 
    "value": 5, 
 
    "label": "manageWebsite" 
 
    }, { 
 
    "source": 16, 
 
    "target": 3, 
 
    "value": 6, 
 
    "label": "manageWebsite" 
 
    }, { 
 
    "source": 16, 
 
    "target": 4, 
 
    "value": 6, 
 
    "label": "manageWebsite" 
 
    }, { 
 
    "source": 19, 
 
    "target": 18, 
 
    "value": 2, 
 
    "label": "postedOn" 
 
    }, { 
 
    "source": 18, 
 
    "target": 1, 
 
    "value": 6, 
 
    "label": "childOf" 
 
    }, { 
 
    "source": 17, 
 
    "target": 19, 
 
    "value": 8, 
 
    "label": "describes" 
 
    }, { 
 
    "source": 18, 
 
    "target": 11, 
 
    "value": 6, 
 
    "label": "containsKeyword" 
 
    }, { 
 
    "source": 17, 
 
    "target": 13, 
 
    "value": 3, 
 
    "label": "containsKeyword" 
 
    }, { 
 
    "source": 20, 
 
    "target": 13, 
 
    "value": 3, 
 
    "label": "containsKeyword" 
 
    }, { 
 
    "source": 20, 
 
    "target": 21, 
 
    "value": 3, 
 
    "label": "postedOn" 
 
    }, { 
 
    "source": 22, 
 
    "target": 20, 
 
    "value": 3, 
 
    "label": "postedOn" 
 
    }, { 
 
    "source": 23, 
 
    "target": 21, 
 
    "value": 3, 
 
    "label": "manageWebsite" 
 
    }, { 
 
    "source": 23, 
 
    "target": 24, 
 
    "value": 3, 
 
    "label": "manageWebsite" 
 
    }, { 
 
    "source": 23, 
 
    "target": 25, 
 
    "value": 3, 
 
    "label": "manageWebsite" 
 
    }, { 
 
    "source": 23, 
 
    "target": 26, 
 
    "value": 3, 
 
    "label": "manageWebsite" 
 
    }] 
 
}; 
 

 
force 
 
    .nodes(graph.nodes) 
 
    .links(graph.links) 
 
    .start(); 
 

 
var link = svg.selectAll(".link") 
 
    .data(graph.links) 
 
    .enter().append("line") 
 
    .attr("class", "link") 
 
    .style("stroke-width", function(d) { 
 
    return Math.sqrt(d.value); 
 
    }); 
 

 
var node = svg.selectAll(".node") 
 
    .data(graph.nodes) 
 
    .enter().append("circle") 
 
    .attr("class", "node") 
 
    .attr("r", 5) 
 
    .style("fill", function(d) { 
 
    return color(d.group); 
 
    }) 
 
    .call(force.drag); 
 

 
node.append("title") 
 
    .text(function(d) { 
 
    return d.name; 
 
    }); 
 

 
/**********************************************************/ 
 

 
node.filter(function(d) { 
 
    if (d.rating > 50) { 
 
     return this 
 
    } 
 
    }) 
 
    .attr('class', 'someclass'); 
 

 
/**********************************************************/ 
 

 

 
force.on("tick", function() { 
 
    link.attr("x1", function(d) { 
 
     return d.source.x; 
 
    }) 
 
    .attr("y1", function(d) { 
 
     return d.source.y; 
 
    }) 
 
    .attr("x2", function(d) { 
 
     return d.target.x; 
 
    }) 
 
    .attr("y2", function(d) { 
 
     return d.target.y; 
 
    }); 
 

 
    node.attr("cx", function(d) { 
 
     return d.x; 
 
    }) 
 
    .attr("cy", function(d) { 
 
     return d.y; 
 
    }); 
 
});

.node { 
 
    stroke: #fff; 
 
    stroke-width: 1.5px; 
 
} 
 
.link { 
 
    stroke: #999; 
 
    stroke-opacity: .6; 
 
} 
 
.someclass { 
 
    stroke: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>