Question

我在这里有一个Plunker，条形图中的矩形会相应地更新，但文字不是出于某种原因，它在d3js v3中工作，我不知道为什么它不会工作

这部分代码不起作用：

textOnBar2.transition()
    .duration(600)
    .attr("y", y0.bandwidth()/2+3)
    .attr("x", function(d) { return x1(d["x0_"+TEAM])+25})
    .text(function(d) { return formatText(d["x1_"+TEAM])});

感谢任何帮助！

Answer 1

这是由D3 v4不再将输入选择中的节点合并到更新选择中引起的。来自更改日志：

此外，selection.append不再将输入节点合并到更新选择中;在数据加入后使用selection.merge组合输入和更新。

因此，您的选择textOnBar2在事件处理程序中将为空，从而导致转换不按预期移动任何文本。

解决方案是将输入选择合并到更新选择中：

// Update selection
var textOnBar2 = category.selectAll(".textOnBar2")
  .data(function(d) { return d.results; });

// Keep the enter selection in its own variable.
var textOnBar2Enter = textOnBar2.enter().append("text")
  .attr("fill","#fff")
  .attr("width", function(d) { return x1(d["x1_"+TEAM])- x1(d["x0_"+TEAM]) })
  .attr("height", y0.bandwidth())
  .attr("y", y0.bandwidth()/2+3)
  .attr("x", function(d) { return x1(d["x0_"+TEAM])+5})
  .text(function(d) { return formatText(d["x1_"+TEAM])});

// Merge enter selection into update selection. 
textOnBar2 = textOnBar2.merge(textOnBar2Enter);

查看更新的Plunkr以了解正常工作的演示。

文本未在堆积条形图d3js v4中更新

1 个答案: