javascript - 使用文本渲染 D3.js 旭日图

Question

我正在尝试修改旭日图，大部分改编/复制自 http://bl.ocks.org/mbostock/4348373使用 D3.js。我正在尝试向这些弧添加一些文本(如下所示: https://www.jasondavies.com/coffee-wheel/ )。然而，文本只是不可见。我正在尝试使用文本路径。我尝试过的:

• 将弧线的不透明度设置为零，只是为了确保文本不会以某种方式隐藏
• 渲染圆弧而不是文本，也不会渲染

结果如下:

<svg height="700" width="960"><g transform="translate(480, 350)">
  <path style="stroke: rgb(255, 255, 255); fill: rgb(49, 130, 189);" d="M0,202.072594216369A202.072594216369,202.072594216369 0 1,1 0,-202.072594216369A202.072594216369,202.072594216369 0 1,1 0,202.072594216369Z" id="node_0" class="siv_node">
    <title>Tooltip of this arc</title>
    <text class="node_text">
      <textPath xlink:href="#node_0">foobar</textPath>
    </text>
  </path>
  <path style="stroke: rgb(255, 255, 255); fill: rgb(49, 130, 189);" d="M-5.249579602826461e-14,-285.7738033247041A285.7738033247041,285.7738033247041 0 0,1 -5.249579602826461e-14,-285.7738033247041L-3.712013335537173e-14,-202.072594216369A202.072594216369,202.072594216369 0 0,0 -3.712013335537173e-14,-202.072594216369Z" id="node_1" class="siv_node">
    <title>Title of this arc</title>
    <text class="node_text">
      <textPath xlink:href="#node_1">foobar</textPath>
    </text>
  </path>
  ...
</svg>

这是添加文本的部分:

var c = svg.selectAll("path")
  .data(partition.nodes( opt.nodes )).enter()
    .append("path")
    .attr("class", "siv_node")
    .attr("id", function(d, i) { return "node_"+i;});

[...]
c.append("text")
  .attr("class", "node_text")
  .append("textPath")
  .attr("xlink:href", function(d, i) { return "#node_"+i; } )
  .text("foobar");

我想我已经注意到了:

• 使用检查器调试元素时，不会为文本元素保留空间(如路径，请参见屏幕截图)
• 我不知道发生了什么(我是 D3.js 和 SVG 新手...)

完整代码如下:

renderSunburst: function(opt) {
        // Rendering sunburst diagramm. mostly adapted from:
        // http://bl.ocks.org/mbostock/4063423 and
        // http://bl.ocks.org/mbostock/4348373
        var self = this;
        opt = opt || {};
        opt = this.makeSunburstOptionsValid(opt);

        var stash = function(d) {
            d.x0 = d.x;
            d.dx0 = d.dx;
        };

        // Interpolate the arcs in data space.
        var arcTween = function(a) {
            var i = self.d3.interpolate({x: a.x0, dx: a.dx0}, a);
            return function(t) {
                var b = i(t);
                a.x0 = b.x;
                a.dx0 = b.dx;
                return arc(b);
            };
        };

        var radius = Math.min( opt.size.width, opt.size.height) / 2;
        var formatNumber = d3.format(",d");

        var x = this.d3.scale.linear().range([0, 2 * Math.PI]);
        var y = this.d3.scale.sqrt().range([0, radius]);

        var color = this.d3.scale.category20c();
        var partition = this.d3.layout.partition()
              .value(function(d) { return d.size; });

        var arc = this.d3.svg.arc()
            .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
            .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
            .innerRadius(function(d) { return Math.max(0, y(d.y)); })
            .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });

        var svg = this.d3.select( opt.container ).append("svg")
                .attr("width", opt.size.width)
                .attr("height", opt.size.height)
            .append("g")
                .attr("transform", "translate(" + opt.size.width / 2 + ", " + opt.size.height / 2 + ")" );

        var click = function(d) {
            svg.transition()
                .duration( opt.animation.duration  )
                .tween("scale", function() {
                    var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
                        yd = d3.interpolate(y.domain(), [d.y, 1]),
                        yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
                        return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); };
                    })
            .selectAll("path")
                  .attrTween("d", function(d) { return function() { return arc(d); }; });

        };

        var c = svg.selectAll("path")
            .data(partition.nodes( opt.nodes )).enter()
            .append("path")
            .attr("class", "siv_node")
            .attr("id", function(d, i) { return "node_"+i;});

        c.attr("d", arc)
                .style("stroke", "#fff")
                //.attr("fill-opacity", "0")
                .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
                ;// .on("click", click);

        c.append("title")
            .text(function(d) { return d.name + "\n" + formatNumber(d.value); });

        // svg.selectAll(".siv_node")
        //  .data( opt.nodes )
        //  .enter()
        c.append("g").append("text")
            .attr("class", "node_text")
            .style("color", "green")
            .style("fill", "black")
            .attr("stroke", "black")
          .append("textPath")
            .attr("xlink:href", function(d, i) { return "#node_"+i; } )
            .text("foobar");

Answer 1

文本和文本路径不喜欢成为它们所引用的路径的子元素，因此您需要像这样理清它们:

https://jsfiddle.net/ye9ckcbr/

<svg height="700" width="960"><g transform="translate(480, 350)">

  <path style="stroke: rgb(255, 255, 255); fill: rgb(49, 130, 189);" d="M0,202.072594216369A202.072594216369,202.072594216369 0 1,1 0,-202.072594216369A202.072594216369,202.072594216369 0 1,1 0,202.072594216369Z" id="node_0" class="siv_node">
    </path>
    <path style="stroke: rgb(255, 255, 255); fill: rgb(49, 130, 189);" d="M-5.249579602826461e-14,-285.7738033247041A285.7738033247041,285.7738033247041 0 0,1 -5.249579602826461e-14,-285.7738033247041L-3.712013335537173e-14,-202.072594216369A202.072594216369,202.072594216369 0 0,0 -3.712013335537173e-14,-202.072594216369Z" id="node_1" class="siv_node">
    </path>

    <text class="node_text">
     <title>Tooltip of this arc</title>
      <textPath xlink:href="#node_0">foobar</textPath>
    </text>

    <text class="node_text">
        <title>Title of this arc</title>
      <textPath xlink:href="#node_1">foobar</textPath>
    </text>
</svg>