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

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);