D3.js D3力定向单击节点并更改其相邻颜色

D3.js D3力定向单击节点并更改其相邻颜色,d3.js,click,D3.js,Click,我正在研究D3JS的力定向图。我想要的是在单击节点的邻居时更改节点的颜色。但我只能更改单击节点的相邻链接(边)的颜色。连接的节点是可获取的,但我不知道如何更改其颜色 这是密码 function addTheD3Map(labelname, jsonpath){ var width = 800, height = 610; width = window.screen.width*0.72; var color = d3.scale.category2

我正在研究D3JS的力定向图。我想要的是在单击节点的邻居时更改节点的颜色。但我只能更改单击节点的相邻链接(边)的颜色。连接的节点是可获取的,但我不知道如何更改其颜色

这是密码

function addTheD3Map(labelname, jsonpath){
    var width = 800,
        height = 610;
        width = window.screen.width*0.72;
    var color = d3.scale.category20();

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

    var svg = d3.select(labelname).append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .call(d3.behavior.zoom().scaleExtent([0.5, 8]).on("zoom", zoom))
        .append("g")

    svg.append("rect")
        .attr("class", "overlay")
        .attr("width", width)
        .attr("height", height)
        .attr("fill", "#123456");

    function zoom() {
      svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }

    d3.json(jsonpath, function(error, graph) {
      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 d.value;/*return Math.sqrt(d.value);*/ })
          .on("click", function(d) {showEdgeInfo(d)});

      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)
          .on("click", function(d) {
                    var selectednodename = d.name;
                    svg.selectAll(".node").style("fill", function(d) { return color(d.group); });
                    svg.selectAll(".link").style("stroke", function(d) { if(d.target.name==selectednodename||d.source.name==selectednodename){                                              return "black";}                                                                else{return "grey";} });
                    d3.select(this).style("fill", "black"); 

                    showNodeInfo(d)});

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

      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; });
      });
    });
}
最相关的代码如下所示:

.on("click", function(d) {
    var selectednodename = d.name;
    svg.selectAll(".node").style("fill", function(d) { return color(d.group); });
    svg.selectAll(".link").style("stroke", function(d) { if(d.target.name==selectednodename||d.source.name==selectednodename){                                                
        return "black";}                                                                    
        else{return "grey";} });
    d3.select(this).style("fill", "black"); 
1.重新绘制节点以恢复其颜色

2.如果边连接到选定节点,则将其设置为黑色,否则为灰色

3.将选定节点绘制为黑色


我想在步骤2中使边的另一个节点变成黑色(或一些不同的颜色)。我该怎么做呢?

@larskothoff这很有用,谢谢!