按权重过滤节点并更改属性

Question

使用强制布局，在从数据中添加圆圈后，我尝试执行以下

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

过滤器返回正确的节点选择，但当我添加到.attr('class', 'someclass')时，我会得到以下错误：

类型错误：force.nodes（…）.filter（…）.attr不是函数

如何根据使用其力属性的节点过滤器选择来附加属性？

感谢您阅读我的问题

Answer 1

您应该使用节点的d3选择来将属性设置为已过滤的元素集。

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

请参考下面的小提琴。我已经将someClass添加到自定义样式（此处为笔划颜色）的过滤节点集。

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>