問題添加多個文本元素SVG元素

Question

與基於D3 code並行座標系工作時，我嘗試添加一些文字：

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

以前創建的SVG：文本和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元素的文本會刪除任何tspans裏面，大概是因爲tspans視爲文字是很重要的。

你想是這樣的

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

因此，創建一個text節點，即保存到一個變量，然後追加tspans該變量。

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