Question

我是D3和javascript的新手。我在这里处理示例：https://bl.ocks.org/cjrd/6863459

我正在尝试基于数据将标签添加到图形的所有边缘。看来我至少在检查元素时正确添加了标签，所有文本元素均正确显示。但是，实际的标签未显示在图中。奇怪的是，如果我使用inspect元素编辑HTML元素并简单地添加新行并退出编辑模式，则标签会突然显示。

有人可以帮我弄清楚发生了什么吗？我已经花了很多时间试图调试它，但无济于事。

我在线阅读了许多线程，唯一需要做的就是我需要在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(&quot;#end-arrow&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(&quot;#end-arrow&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(&quot;#end-arrow&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(&quot;#end-arrow&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(&quot;#end-arrow&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(&quot;#end-arrow&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(&quot;#end-arrow&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>

我希望标签会显示出来。我想念什么？

使用文本路径的标签不会出现在D3有向图中

0 个答案: