Question

我正在研究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.Repaint节点恢复颜色

2.如果边缘连接到所选节点，则将其设为黑色，否则为灰色

3.Paint selected node black

我想在第2步中使边缘的另一个节点变黑（或某些颜色不同）。我怎么能这样做？

D3强制定向单击节点并更改其邻居颜色

0 个答案: