Question

我正在尝试向我的方法发送一组ID来构建我的Force Directed地图。我遍历节点，我想设置从父ID中选择的节点的填充颜色。我在页面上有一个列表，当您从中选择一个项目时，它将通过匹配颜色突出显示其他节点。我似乎无法获得正确的填充颜色。非常感谢任何帮助。

<code>
function buildAllForceDirectedMultiMap(node, ids) {

    d3.select("svg").remove();

    var width = 960,
        height = 500;

    var svg = d3.select(node).append("svg")
        .attr("width", width)
        .attr("height", height);    

    var color = d3.scale.category20();

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

    var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function (d) {
            return "<strong>DPID:</strong> <span style='color:red'>" + d.dpid + "</span><br />" + "<strong>Type:</strong> <span style='color:red'>" + d.type + "</span>";
        })      

        svg.call(tip);

    d3.json("http://atxapps.com/apps/data/onos/dataGetFDAllInstances.php", 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 Math.sqrt(d.value); });

      var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter().append("circle")
                .attr("class", function(d) { 
                                    if(d.type == undefined) {
                                        return "node"; 
                                    } else {
                                        return d.type; 
                                    }})
                .attr("r", function(d) { 
                                    if(d.type == undefined) {
                                        return 5; 
                                    } else {
                                        switch(d.type) {
                                            case "core":
                                                return 10;
                                                break;
                                            case "agg":
                                                return 8;
                                                break;
                                            default:
                                                return 5;
                                            } 
                                    }})
                .style("fill", function(d) {                                    
                                    var count = ids.length;
                                    for (i = 0; i <= count; i++) {
                                        if(ids[i] != undefined) {
                                            if(ids[i].attributes.id == d.instance_id) {
                                                return d.color;
                                            } else {
                                                return "#2a2a2a";
                                            }}
                                        }
                                        return d.color;                                         
                                    }
                                )
                .on('mouseover', tip.show)
                .on('mouseout', tip.hide)
                .call(force.drag)
                .on("click", function (d) {
                    //alert(d.dpid);
                });             

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

Answer 1

最后必须选择我正在使用的d3元素的实例。代码现在看起来像这样

<pre>
                .style("fill", function(d) {                                    
                                    var count = ids.length;
                                    var color = "rgb(0, 0, 0)";
                                    if(d3.select(this).style("fill") == color){
                                        for (i = 0; i <= count; i++) {
                                            if(ids[i] != undefined) {
                                                    if(ids[i].attributes.id == d.instance_id) {
                                                        color = d.color;
                                                    } 
                                                } 
                                            }
                                            return color;                                       
                                        }
                                    }
                                )
</pre>

D3 Force Directed Map有条件地设置节点的填充颜色

1 个答案: