D3 强制定向地图源和目标属性

Question

D3 Force Directed Map 是否可以使用源和目标以外的名称？我正在连接一个为我提供所需信息的 API，但他们将其作为“src-port”和“dst-port”提供。如果我将静态 JSON 文件中的名称更改为“源”和“目标”，我的地图上的链接就会出现。如果我保持原样，我会收到以下错误消息：

e.source 未定义

有没有一种方法可以指定要查找的属性名称，而不是使用默认值“源”和“目标”？

下面是完整的代码：

function buildMap(node, ids, mode) {

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

    width = 960,
    height = 500;

    svg = d3.select(node).append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("id","chart")
        .attr("preserveAspectRatio","xMidYMid")
        .attr("viewBox","0 0 960 500");

    var color = d3.scale.category20();

    var force = d3.layout.force()
        .charge(-220)
        .linkDistance(40)
        .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://192.168.1.82:9000/wm/onos/topology", function(error, graph) {

    d3.json("http://localhost:9001/data/nodes.json", function(error, graph) {
      force
          .nodes(graph.switches)
          .links(graph.links.forEach(function(l) {
                    l.source = l["src-port"];
                    l.target = l["dst-port"];
                })
            )                             
          .on("tick", tick)
          .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.switches)
            .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;
                                    //if(count <= 0)
                                    //  return d.color;
                                    var color = "#15a9ff";
                                    //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;                                       
                                    //  }
                                    }
                                )
                .on('mouseover', tip.show)
                .on('mouseout', tip.hide)
                .call(force.drag)
                .on("click", function (d) {
                                enyo.Signals.send("onNodeSelected", d);
                            });             


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

        function tick(e) {
            //if(mode == "tree") {
            //  var k = 6 * e.alpha;
            //  graph.links.forEach(function(d, i) {
            //    d.source.y -= k;
            //    d.target.y += k;
            //  });
                node.attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; });
                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; });
            //} else {
            //  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; });           
            }
        //}   
    });
}

Answer 1

无法通过 API 做到这一点；您将不得不修改源。解决此问题的一种简单方法是将src-port 和dst-port 中的值复制到source 和target：

links.forEach(function(l) {
  l.source = l.src-port;
  l.target = l.dst-port;
});