#d3.js #svg
#d3.js #svg
Вопрос:
Я вроде как новичок в D3 и javascript. Я работаю над примером здесь: https://bl.ocks.org/cjrd/6863459
Я пытаюсь добавить метку ко всем ребрам моего графика на основе данных. Похоже, что я правильно добавил метки, по крайней мере, когда я проверяю элемент, все текстовые элементы отображаются правильно. Однако фактические метки не отображаются на диаграмме. Странная часть заключается в том, что если я отредактирую элемент HTML с помощью inspect element и просто добавлю новую строку и выйду из режима редактирования, метки внезапно появятся.
Кто-нибудь может помочь мне разобраться, что происходит? Я уже потратил много часов, пытаясь отладить это безрезультатно.
Я читаю много тем в Интернете, и единственное, что у меня есть, это то, что мне нужно добавить метки в мою функцию tick. Однако у меня нет функции tick в коде, и я не думаю, что это проблема.
var paths = thisGraph.paths;
paths.enter()
.append("path")
.style('marker-end', 'url(#end-arrow)')
.attr("id", function (d) {
return "arrow_path_" d.source.id "_" d.target.id
})
.classed("link", true)
.attr("d", function (d) {
return thisGraph.updateArrows.call(thisGraph, d3.select(this), d);
})
.on("mousedown", function (d) {
thisGraph.pathMouseDown.call(thisGraph, d3.select(this), d);
})
.on("mouseup", function (d) {
state.mouseDownLink = null;
});
var labels = d3.select('#edges');
var edgelabels = labels.selectAll("text")
.data(thisGraph.edges)
.enter()
.append("text")
.style("pointer-events", "none")
.attr({
'class': 'edgelabel',
'id': function (d, i) {return 'edgelabel' i},
'font-size': 10,
'fill': '#aaa'
})
.append("textpath")
.attr("class", "textpath")
.attr("startOffset", "55.76%")
.style("text-anchor", "end")
.attr("xlink:href", function (d) {
return "#arrow_path_" d.source.id "_" d.target.id
})
.text(function(d) { return d.label; });
<g id="edges"><path id="arrow_path_0_1" class="link" d="M738,430L738,423.1875" style="marker-end: url(amp;quot;#end-arrowamp;quot;);"></path><path id="arrow_path_1_2" class="link" d="M677.015625,484.5L660.51171875,484.5C644.0078125,484.5,611,484.5,594.49609375,484.5C577.9921875,484.5,577.9921875,484.5,577.9921875,512.5833333333334C577.9921875,540.6666666666666,577.9921875,596.8333333333333,577.9921875,624.9166666666666L577.9921875,653" style="marker-end: url(amp;quot;#end-arrowamp;quot;);"></path><path id="arrow_path_1_3" class="link" d="M677.015625,484.5L713.8776041666666,484.5C750.7395833333333,484.5,824.4635416666666,484.5,861.3255208333333,484.5C898.1875,484.5,898.1875,484.5,898.1874999999999,512.5833333333334C898.1875,540.6666666666666,898.1875,596.8333333333333,898.1874999999999,624.9166666666666L898.1875,653" style="marker-end: url(amp;quot;#end-arrowamp;quot;);"></path><path id="arrow_path_3_4" class="link" d="M898.1875,703L898.1874999999999,712.1666666666666C898.1875,721.3333333333333,898.1875,739.6666666666666,898.1874999999999,748.8333333333334C898.1875,758,898.1875,758,881.8906249999999,758C865.59375,758,833,758,816.7031249999999,758L800.40625,758" style="marker-end: url(amp;quot;#end-arrowamp;quot;);"></path><path id="arrow_path_4_5" class="link" d="M738.1875,783L738.1875,795.9166666666666C738.1875,808.8333333333333,738.1875,834.6666666666666,738.1875,847.5833333333333C738.1875,860.5,738.1875,860.5,753.9166666666666,860.4999999999999C769.6458333333333,860.5,801.1041666666666,860.5,816.8333333333333,860.4999999999999L832.5625,860.5" style="marker-end: url(amp;quot;#end-arrowamp;quot;);"></path><path id="arrow_path_5_6" class="link" d="M738.0078125,908L738.0078125,908.6666666666665C738.0078125,909.3333333333333,738.0078125,910.6666666666666,738.0078125,911.3333333333333C738.0078125,912,738.0078125,912,750.37109375,912C762.734375,912,787.4609374999999,912,799.82421875,912L812.1875,912" style="marker-end: url(amp;quot;#end-arrowamp;quot;);"></path><path id="arrow_path_6_7" class="link" d="M664.28125,912L676.4830729166666,912C688.6848958333333,912,713.0885416666666,912,725.2903645833334,912C737.4921875,912,737.4921875,912,737.4921875,922.1666666666666C737.4921875,932.3333333333333,737.4921875,952.6666666666666,737.4921875,962.8333333333333L737.4921875,973" style="marker-end: url(amp;quot;#end-arrowamp;quot;);"></path><text class="edgelabel" id="edgelabel0" font-size="10" fill="#aaa" style="pointer-events: none;"><textpath class="textpath" startOffset="55.76%" xlink:href="#arrow_path_0_1" style="text-anchor: end;">1</textpath></text><text class="edgelabel" id="edgelabel1" font-size="10" fill="#aaa" style="pointer-events: none;"><textpath class="textpath" startOffset="55.76%" xlink:href="#arrow_path_1_2" style="text-anchor: end;">2</textpath></text><text class="edgelabel" id="edgelabel2" font-size="10" fill="#aaa" style="pointer-events: none;"><textpath class="textpath" startOffset="55.76%" xlink:href="#arrow_path_1_3" style="text-anchor: end;">3</textpath></text><text class="edgelabel" id="edgelabel3" font-size="10" fill="#aaa" style="pointer-events: none;"><textpath class="textpath" startOffset="55.76%" xlink:href="#arrow_path_3_4" style="text-anchor: end;">4</textpath></text><text class="edgelabel" id="edgelabel4" font-size="10" fill="#aaa" style="pointer-events: none;"><textpath class="textpath" startOffset="55.76%" xlink:href="#arrow_path_4_5" style="text-anchor: end;">5</textpath></text><text class="edgelabel" id="edgelabel5" font-size="10" fill="#aaa" style="pointer-events: none;"><textpath class="textpath" startOffset="55.76%" xlink:href="#arrow_path_5_6" style="text-anchor: end;">6</textpath></text><text class="edgelabel" id="edgelabel6" font-size="10" fill="#aaa" style="pointer-events: none;"><textpath class="textpath" startOffset="55.76%" xlink:href="#arrow_path_6_7" style="text-anchor: end;">7</textpath></text></g>
Я ожидаю, что метки появятся. Чего мне не хватает?
Комментарии:
1. У вас опечатка, это textPath, а не textpath.
2. Вау, спасибо, что сработало! Я знал, что svg чувствителен к регистру, но был небрежен с этим. Большое вам спасибо!