D3.js - 链接未显示在地图上（传单）

Question

因此，我在地图上做了一个简单的表示，其中有节点和链接，一个简单的数据只是为了在连接到 json 文件之前对其进行测试，并且我使用 leaflet.js 作为地图。我将展示我的以下 JavaScrip、CSS 和 HTML。基本上，我可以看到我的节点在地图上创建，但是当涉及到链接时，它们不会在任何地方显示。我确信我在某个地方犯了错误，但我不知道在哪里。我敢打赌，一双新的眼睛可以指出我的基本错误。有人可以帮我吗？（注意：在我插入地图并尝试将节点与链接连接之前，它工作得很好）问题如何显示地图中节点之间的链接？

Answer 1

我忘记调整 html 中的坐标和lat轴long，就像我在圆圈中所做的那样。xy

基本上这是我的结果：

d3.select("#mapid") 

    .select("svg")

    .selectAll("line")

    .data(links)    

    .enter()

    .append("line")

    .attr("x1", function(d) { return map.latLngToLayerPoint([d.source.lat, d.source.long]).x})

    .attr("y1", function(d) { return map.latLngToLayerPoint([d.source.lat, d.source.long]).y})

    .attr("x2", function(d) { return map.latLngToLayerPoint([d.target.lat, d.target.long]).x})

    .attr("y2", function(d) { return map.latLngToLayerPoint([d.target.lat, d.target.long]).y})

    .style("stroke", function(d, i)

    {

        if(d.fraude == 2)

        { return "rgb(197,53,53)"}

        else

        { return "rgb(96,211,62"}        

    })

    .style("stroke-width", 5)    

我还必须更新功能更新，因为如果我不这样做，线条将始终保留在框架中：

function update() {

d3.selectAll("circle")

    .attr("cx", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).x })

    .attr("cy", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).y })

d3.selectAll("line")

    .attr("x1", function(d) { return map.latLngToLayerPoint([d.source.lat, d.source.long]).x})

    .attr("y1", function(d) { return map.latLngToLayerPoint([d.source.lat, d.source.long]).y})

    .attr("x2", function(d) { return map.latLngToLayerPoint([d.target.lat, d.target.long]).x})

    .attr("y2", function(d) { return map.latLngToLayerPoint([d.target.lat, d.target.long]).y})

}