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容器中。有人知道可能是什么问题吗？

- Rita

---

你认为为什么它们没有显示出来？http://jsfiddle.net/3ydk4Lwy/ - user3714582

我尝试了你的示例，它可以工作。但是在我的代码中却不行，这很奇怪。我正在创建的图形可视化是一个更大项目的一部分，我们使用了许多库，我担心可能存在某些依赖冲突。但我不知道该如何找出原因... - Rita

你的应用程序中节点圆圈的大小是多少？ - VividD

你的应用程序中是否使用了<base> HTML标签？ - Robert Longson

节点圆的半径从5到30不等。不，我没有使用<base>标签。 - Rita

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/”下具有“end” ID的元素，而你希望它在“www.yourdomain/partofyourwebsite/pageGraphIsRenderedIn”下查找，但我不确定这是否正确。

- thedev19

---

嗨，是的，问题确实是由于错误的URL引起的 ;) - Rita