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

Question

使用强制定向布局，在从数据中追加圆圈之后我尝试执行以下操作

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

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

TypeError：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添加到自定义样式的过滤节点集（此处为Stroke颜色）。

＆＃13;

＆＃13;

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;
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;