因此，我在地圖上做了一個(gè)簡單的表示，其中有節(jié)點(diǎn)和鏈接，一個(gè)簡單的數(shù)據(jù)只是為了在連接到 json 文件之前對(duì)其進(jìn)行測試，并且我使用 leaflet.js 作為地圖。我將展示我的以下 JavaScrip、CSS 和 HTML。基本上，我可以看到我的節(jié)點(diǎn)在地圖上創(chuàng)建，但是當(dāng)涉及到鏈接時(shí)，它們不會(huì)在任何地方顯示。我確信我在某個(gè)地方犯了錯(cuò)誤，但我不知道在哪里。我敢打賭，一雙新的眼睛可以指出我的基本錯(cuò)誤。有人可以幫我嗎？（注意：在我插入地圖并嘗試將節(jié)點(diǎn)與鏈接連接之前，它工作得很好）問題如何顯示地圖中節(jié)點(diǎn)之間的鏈接？
1 回答
holdtom
TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊
我忘記調(diào)整 html 中的坐標(biāo)和lat軸long，就像我在圓圈中所做的那樣。xy
基本上這是我的結(jié)果：
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)
我還必須更新功能更新，因?yàn)槿绻也贿@樣做，線條將始終保留在框架中：
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 關(guān)注
- 155 瀏覽
添加回答
舉報(bào)
0/150
提交
取消