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 /», тогда как вы хотите, чтобы смотреть под «www.yourdomain/partofyourwebsite/pageGraphIsRenderedIn», хотя я не уверен, что это правильно.