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

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

1 个答案: