D3.js d3js力定向图绘制节点，但不绘制链接

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

 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}]

整个代码都在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}]

我的数据结构：

 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”连接到链接中的“源”和“目标”。你知道怎么做吗？

你需要在

链接上设置笔划颜色

变量

 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 link = svg.selectAll('link')
  .data(links)
  .enter()
  .append('line')
  .attr('class', 'link')
  .style("stroke", 'black')

请参见下面的完整片段。我已将其清理干净，以使其在堆栈片段中运行

 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宽度=320，
高度=240；
链接=[{
“来源”：0，
"目标":一,，
“价值”：30
},
{
“来源”：0，
"目标":二,，
“价值”：5
},
{
“来源”：1，
"目标":三,，
“价值”：1
},
{
“来源”：2，
“目标”：0，
“价值”：20
}
]
节点=[{
“ip”：“92.15.122.1”，
“价值”：5，
身份证号码：0
},
{
“ip”：“12.154.154.22”，
“价值”：20，
身份证号码：1
},
{
“ip”：“255.12.11.1”，
“价值”：30，
身份证号码：2
},
{
“ip”：“54.55.6.55”，
“价值”：1，
身份证号码：3
}
]
var svg=d3。选择（'body'）。追加（'svg'））
.attr（'width'，width）
.attr（'height'，height）
.attr（'transform'，'translate（'+width/2+'，'+height/3+'））；
var-force=d3.layout.force（）
.尺寸（[宽度、高度]）
.节点（节点）
.链接（links）；
函数tick（）{
节点属性（'r'，宽度/25）
.attr（'cx'，函数（d）{
返回d.x；
})
.attr（'cy'，函数（d）{
返回d.y；
});
link.attr（'x1'，函数（d）{
返回d.source.x；
})
.attr（'y1'，函数（d）{
返回d.source.y；
})
.attr（'x2'，函数（d）{
返回d.target.x；
})
.attr（'y2'，函数（d）{
返回d.target.y；
});
}
强制开启（“滴答”，滴答）；
var link=svg.selectAll（'link'）
.数据（链接）
.输入（）
.append（'行'）
.attr（'class'，'link'）
.style（“笔划”，“黑色”）
.样式（“笔划宽度”，功能（d）{
返回Math.sqrt（d.value）；
}).attr（'x1'，函数（d）{返回d.source.x；}）
.attr（'y1'，函数（d）{返回d.source.y；}）
.attr（'x2'，函数（d）{返回d.target.x；}）
.attr（'y2'，函数（d）{返回d.target.y；}）；
var node=svg.selectAll（'node'）
.数据（节点）
.输入（）
.append（'圆'）
.attr（'类'，'节点'）
.style（“不透明度”，.9）
.attr（“r”，函数（d）{
返回10；
})
.attr（“id”，函数（d）{
返回d.id；
})
.attr（“cy”，函数（d）{
返回d.y；
})
.attr（“cx”，功能（d）{
返回d.x；
})
.样式（“笔划宽度”，20）；
力
.节点（节点）
.链接（links）
。收费（-150）
.linkDistance（90）
.start（）

仍不工作，因此错误一定在其他地方。但是链接数据是正确的，它甚至创建了正确数量的线元素。嗯……我注意到你的线条元素没有任何坐标或平移。你能用我的代码片段让它工作吗？我想这是因为它不知道如何将节点映射到目标和源链接。但是，如果图表的代码和数据正确，我不知道哪里会有问题/我不确定你的代码是否100%正确，我必须调整它使它在这里工作。我明白了。我有两个不同的函数来创建链接和节点（因为kibana），由于某些原因，没有调用链接的tick函数。谢谢你的帮助！