使用基于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
任何人都可以帮忙弄清楚可能导致这种情况的原因,以及我可以做些什么来同时显示所有标签?非常感谢!
答案 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
附加到该变量。