排序条形图时移动和更改文本标签

Question

我正在尝试在排序时移动和更改文本标签。我有一个多维数组，包括条形高度、宽度和不透明度。昨天，一位好心的贡献者帮助我正确排序了条形图，但我也想让文本标签在条形图排序和移动时在每个条形图的顶部移动和更改。

var s = -1;
svg.on("click", function() {
s = (s + 1) % 3;
var xPosition = parseFloat(d3.select(this).attr("x")) xScale.bandwidth() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) + 14;
svg.selectAll("rect")
.sort(function(a, b) {
return d3.ascending(a[s], b[s]);
})
.transition()
.delay(function(d, i) {
return i * 65;
})
.duration(250)
.attr("x", function(d, i) {
return xScale(i);
});
svg.selectAll("text")
.append("text")
.text(function(d) {
return d[s];
})
.attr("text-anchor", "left")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
});

正如你所看到的，我很不知该往哪里前进。我从教科书中采用了xPosition和yPosition变量的想法，但它似乎并没有改变任何东西。此外，当我对高度、宽度和不透明度进行排序时，文本标签永远不会更改。感谢您的帮助。

Answer 1

当你这样做时...

svg.selectAll("text")
.append("text")
//etc...

。您将<text>元素附加到<text>元素中，这毫无意义。

取而代之的是，假设您的文本是以前创建的，只需选择它们并相应地对其进行排序：

svg.selectAll("text")
.text(function(d) {
return d[s];
})
.attr("x", xPosition)
.attr("y", yPosition);