在將多個文本元素添加到svg元素時出現問題

Question

使用基於D3的代碼進行平行坐標處理時，我嘗試添加一些文本：

  g_data.select(".label")
      .text(dimensionLabels)   //visible
  g_data.select(".sublabel1")
      .text(dimensionSublabels1)   //not visible
  g_data.select(".sublabel2")
      .text(dimensionSublabels2)   //not visible

到先前創建的svg：text和svg：tspan元素：

var g_data = pc.svg.selectAll(".dimension").data(pc.getOrderedDimensionKeys());
  // Enter
  g_data.enter()
    .append("svg:g")
      .attr("class", "dimension")
      .attr("transform", function(p) { return "translate(" + position(p) + ")"; })
      .style("opacity", 0)
    .append("svg:g")
      .attr("class", "axis")
      .attr("transform", "translate(0,0)")
      .each(function(d) {
        var axisElement = d3.select(this).call( pc.applyAxisConfig(axis, __.dimensions[d]) );

        axisElement.selectAll("path")
            .style("fill", "none")
            .style("stroke", "#222")
            .style("shape-rendering", "crispEdges");

        axisElement.selectAll("line")
            .style("fill", "none")
            .style("stroke", "#222")
            .style("shape-rendering", "crispEdges");
      })


    .append('svg:text')      //1st part of label
        .attr({
            "text-anchor": "middle",
            "y": -40,
            "x": 0,
            "dy": 0,
            "class": "label"
      })
    .append('svg:tspan')      //2nd part of label
        .attr({
            "x": 0,
            "dy": 17,
            "class": "sublabel1"
      })
    .append('svg:tspan')      //3rd part of label
        .attr({
            "x": 0,
            "dy": 14,
            "class": "sublabel2"
      })

問題在於，由於部分我無法解釋的原因，該方法僅部分起作用：一次只能顯示一個文本標簽。

更具體地說，對於上述情況，該文本將僅添加到“ .label”類svg中，而其他兩個則不可見。 但是，如果我注釋掉前兩行（如下所示），則sublabel1變為可見，依此類推。

  //g_data.select(".label")
  //    .text(dimensionLabels)  //with this part commented, the next label becomes visible
  g_data.select(".sublabel1")
      .text(dimensionSublabels1)  //visible
  g_data.select(".sublabel2")
      .text(dimensionSublabels2)  //not visible

誰能幫忙弄清楚是什么原因導致的，我該怎么做才能同時顯示所有標簽？ 非常感謝！

Answer 1

在鏈接要append調用時要小心。 append返回所附元件，所以鏈接appends將創建嵌套結構。

<text class="label">
    <tspan class="sublabel1">
        <tspan class="sublabel2"></tspan>
    </tspan>
</text>

重要的是要注意，設置text元素的text將刪除內部的所有tspans ，大概是因為tspans算作文本。

你想要這樣的東西

<text>
    <tspan class="label"></tspan>
    <tspan class="sublabel1"></tspan>
    <tspan class="sublabel2"></tspan>
</text>

因此，創建一個text節點，將其保存到變量，然后將tspans附加到該變量。

示例： https ： //jsfiddle.net/guanzo/b2q2nm54/1/