将多个文本元素添加到svg元素的问题

时间:2017-05-25 17:20:42

标签: javascript d3.js svg parallel-coordinates

使用基于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: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" class 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

任何人都可以帮忙弄清楚可能导致这种情况的原因,以及我可以做些什么来同时显示所有标签?非常感谢!

1 个答案:

答案 0 :(得分:2)

小心将对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/