问题添加多个文本元素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/