d3js力导向图绘制节点但没有链接

Question

我有力导向图。它显示没有问题的节点，并在控制台上写入链接 - 源和目标。但不将其连接到节点。我可以看到协调员没有字段请参阅picture

整个代码都在 Kibana 中，而且更复杂，但这里是核心：

const link = svg.selectAll('link')
            .data(links)
            .enter()
            .append('svg:line')
            .attr('class', 'link')
            .style("stroke-width", function (d) {return Math.sqrt(d.value);})
            .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;});



            force.on("tick", tick);

      function tick() {
        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("transform", function(d) {
                            return "translate(" + d.x + "," + d.y + ")"; });
              };

        var node = svg.selectAll('node')
            .data(nodes)
            .enter()
            .append('circle')
            .attr('class', 'node')
            .style("opacity", .9)
            .attr("r", function(d) { return 10; })
            .attr("id", function(d) { return d.id; })
            .attr("cy", function(d){return d.y;})
            .attr("cx", function(d){return d.x;})
            .style("fill",  function(d) { return c20(d.value);})
            .style("stroke-width", 20);

 const svg = div.append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g')
          .attr('transform', 'translate('+ width / 2 + ',' + height / 3 + ')');


        var force = d3.layout.force()
        .nodes(nodes)
        .links(links)
        .charge(-150)
        .linkDistance(90)
        .start();

我的数据结构：

 links =   
  [{"source": 0, "target": 1, "value":  30},
  {"source": 0, "target": 2, "value":  5},
  {"source": 1, "target": 3, "value":  1},
  {"source": 2, "target": 0, "value":  20}]


 nodes =          
 [{"ip": "92.15.122.1", "value": 5, id:  0},
  {"ip": "12.154.154.22", "value": 20, id:  1},
  {"ip": "255.12.11.1", "value": 30, id:  2},
  {"ip": "54.55.6.55", "value": 1, id:  3}]

我认为问题是将“id”从“节点”连接到“源”和“目标”的链接。知道怎么做吗？

Answer 1

你需要在link变量上设置描边颜色

var link = svg.selectAll('link')
  .data(links)
  .enter()
  .append('line')
  .attr('class', 'link')
  .style("stroke", 'black')

请参阅下面的完整 sn-p。我已经清理了它，让它在 Stack sn-p 中运行。

var width = 320,
  height = 240;

links = [{
    "source": 0,
    "target": 1,
    "value": 30
  },
  {
    "source": 0,
    "target": 2,
    "value": 5
  },
  {
    "source": 1,
    "target": 3,
    "value": 1
  },
  {
    "source": 2,
    "target": 0,
    "value": 20
  }
]


nodes = [{
    "ip": "92.15.122.1",
    "value": 5,
    id: 0
  },
  {
    "ip": "12.154.154.22",
    "value": 20,
    id: 1
  },
  {
    "ip": "255.12.11.1",
    "value": 30,
    id: 2
  },
  {
    "ip": "54.55.6.55",
    "value": 1,
    id: 3
  }
]

var svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height)
  .attr('transform', 'translate(' + width / 2 + ',' + height / 3 + ')');

var force = d3.layout.force()
  .size([width, height])
  .nodes(nodes)
  .links(links);


function tick() {
  node.attr('r', width / 25)
    .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;
    });
}

force.on("tick", tick);

var link = svg.selectAll('link')
  .data(links)
  .enter()
  .append('line')
  .attr('class', 'link')
  .style("stroke", 'black')
  .style("stroke-width", function(d) {
    return Math.sqrt(d.value);
  }).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;});

  


var node = svg.selectAll('node')
  .data(nodes)
  .enter()
  .append('circle')
  .attr('class', 'node')
  .style("opacity", .9)
  .attr("r", function(d) {
    return 10;
  })
  .attr("id", function(d) {
    return d.id;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .attr("cx", function(d) {
    return d.x;
  })
  .style("stroke-width", 20);



force
  .nodes(nodes)
  .links(links)
  .charge(-150)
  .linkDistance(90)
  .start();

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