Filter nodes by weight and change attribute

Question

Using the force directed layout, after appending circles from data I'm trying to do the following

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

The filter returns the correct selection of nodes however when I add in the .attr('class', 'someclass') I get the following error:

TypeError: force.nodes(...).filter(...).attr is not a function

How do I append an attribute based on a filter selection of nodes using their force attributes?

Thank you for reading my question

Answer 1

You should have used d3 selection of nodes to set the attribute to the filtered set of elements.

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

Please refer to the below fiddle. I have added someClass to filtered set of nodes for custom style(Here, Stroke color).

 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 dx; }) .attr("cy", function(d) { return dy; }); }); 

 .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>