[英]Issue adding multiple text elements to svg elements
Working with a D3-based code for parallel coordinates, I'm trying to add some text: 使用基于D3的代码进行平行坐标处理时,我尝试添加一些文本:
g_data.select(".label")
.text(dimensionLabels) //visible
g_data.select(".sublabel1")
.text(dimensionSublabels1) //not visible
g_data.select(".sublabel2")
.text(dimensionSublabels2) //not visible
to the previously created svg:text and svg:tspan elements: 到先前创建的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"
})
The problem is that this works only partially for a reason I can't explain: only one of the text labels can be displayed at a time. 问题在于,由于部分我无法解释的原因,该方法仅部分起作用:一次只能显示一个文本标签。
More concretely, for the case above, the text will only be added to the ".label" class svg, and the two others are invisible. 更具体地说,对于上述情况,该文本将仅添加到“ .label”类svg中,而其他两个则不可见。 But if I comment out the first two lines (as below), than sublabel1 becomes visible, and so on. 但是,如果我注释掉前两行(如下所示),则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
Could anyone help figure out what may be causing this, and what I could do to have all labels displayed at the same time? 谁能帮忙弄清楚是什么原因导致的,我该怎么做才能同时显示所有标签? Many thanks! 非常感谢!
Be careful about chaining calls to append
. 在链接要append
调用时要小心。 append
returns the appended element, so chaining appends
will create a nested structure. append
返回所附元件,所以链接appends
将创建嵌套结构。
<text class="label">
<tspan class="sublabel1">
<tspan class="sublabel2"></tspan>
</tspan>
</text>
It's important to note that setting the text of a text
element will delete any tspans
inside, presumably because tspans
count as text. 重要的是要注意,设置text
元素的text
将删除内部的所有tspans
,大概是因为tspans
算作文本。
You want something like this 你想要这样的东西
<text>
<tspan class="label"></tspan>
<tspan class="sublabel1"></tspan>
<tspan class="sublabel2"></tspan>
</text>
Therefore, create a text
node, save that to a variable, and then append tspans
to that variable. 因此,创建一个text
节点,将其保存到变量,然后将tspans
附加到该变量。
example: https://jsfiddle.net/guanzo/b2q2nm54/1/ 示例: https : //jsfiddle.net/guanzo/b2q2nm54/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.