因此，我在地圖上做了一個簡單的表示，其中有節點和鏈接，一個簡單的數據只是為了在連接到 json 文件之前對其進行測試，并且我使用 leaflet.js 作為地圖。我將展示我的以下 JavaScrip、CSS 和 HTML?；旧希铱梢钥吹轿业墓濣c在地圖上創建，但是當涉及到鏈接時，它們不會在任何地方顯示。我確信我在某個地方犯了錯誤，但我不知道在哪里。我敢打賭，一雙新的眼睛可以指出我的基本錯誤。有人可以幫我嗎？（注意：在我插入地圖并嘗試將節點與鏈接連接之前，它工作得很好）問題如何顯示地圖中節點之間的鏈接？
1 回答
holdtom
TA貢獻1805條經驗 獲得超10個贊
我忘記調整 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})
}
- 1 回答
- 0 關注
- 169 瀏覽
添加回答
舉報
0/150
提交
取消