不顯示d3標記

Question

我使用http://bl.ocks.org/d3noob/5141278示例創建了一個有向圖。我已經附加了標記的路徑：

var svg = d3.select("#entitiesGraph").append("svg") 
.attr("width", width) 
.attr("height", height); 

svg.append("svg:defs").selectAll("marker") 
.data(["end"]) 
.enter().append("svg:marker") 
.attr("id", "end") 
.attr("viewBox", "0 -5 10 10") 
.attr("refX", 15) 
.attr("refY", -1.5) 
.attr("markerWidth", 12) 
.attr("markerHeight", 12) 
.attr("orient", "auto") 
.append("svg:path") 
.attr("d", "M0,-5L10,0L0,5"); 

var path = svg.append("svg:g").selectAll("path") 
.data(force.links()) 
.enter().append("svg:path") 
.attr("marker-end", "url(#end)"); 

，一切工作正常，除了標誌 - 他們不顯示，但是在JavaScript控制檯我可以看到，他們被附加到SVG容器。

有人想法可能是什麼問題？

Answer 1

不確定您現在是否已經解決了此挑戰。我面臨類似的問題。我在你的問題的情況下的做法是：

var svg = d3.select("#entitiesGraph").append("svg") 
.attr("width", width) 
.attr("height", height); 

svg.append("svg:defs").selectAll("marker") 
.data(["end"]) 
.enter().append("svg:marker") 
.attr("id", window.location.href + "/end") // not .attr("id", "end") 
.attr("viewBox", "0 -5 10 10") 
.attr("refX", 15) 
.attr("refY", -1.5) 
.attr("markerWidth", 12) 
.attr("markerHeight", 12) 
.attr("orient", "auto") 
.append("svg:path") 
.attr("d", "M0,-5L10,0L0,5"); 

var path = svg.append("svg:g").selectAll("path") 
.data(force.links()) 
.enter().append("svg:path") 
.attr("marker-end", "url(#" + window.location.href + "/end)"); // not .attr("marker-end", "url(#end)"); 

我認爲這是因爲你的代碼是尋找具有「www.yourdomain /」下的「結束」的ID，而你希望它看起來之下元素「www.yourdomain/partofyourwebsite/pageGraphIsRenderedIn」雖然我不確定這是否正確。