不显示d3标记

时间:2015-06-08 12:03:09

标签: javascript svg d3.js marker

我使用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容器中。

有人知道可能是什么问题吗?

1 个答案:

答案 0 :(得分:0)

不确定你现在是否已经解决了这个挑战。我遇到了类似的问题。我在你的问题背景下的方法是:

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”下查找虽然我不确定这是否正确。