在d3中应用转换时出错

我试图在d3中设计的条形图上应用一些过渡效果。 这是我的代码 –

svg.selectAll(".bar") .data(data) .enter().append("g") .attr("class", "bar") .append("rect") .attr("rx", barRadius) .attr("fill","333" ) // .attr("color_value", "steelblue") .attr("index_value", function(d, i) { return "index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi'); }) .attr("class", function(d, i) { return "bars-Bubble-index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi')+div; }) .attr("id", function(d) { return d[columns[0]] + ":" + d[measure1]; }) .attr("onclick", fun) .attr("x", function(d) { return x(d[columns[0]]); }) .attr("width",0) .transition() .duration(2000)//1 second .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d[measure1]); }) .attr("height", function(d) { return height - y(d[measure1]); }) 

转换似乎工作正常，除了我在浏览器控制台TypeError上收到以下错误：svg.selectAll（…）。data（…）。enter（…）。append（…） .attr（…）。追加（…）。ATTR（…）。ATTR（…）。ATTR（…）。ATTR（…）。ATTR（…）。 ATTR（…）。ATTR（…）。ATTR（…）过渡（…）持续时间（……）。ATTR（…）。ATTR（…）。ATTR （…）。on不是函数TypeError：bars.append（…）。attr（…）。attr（…）。transition（…）。duration（…）。 ATTR（…）。ATTR（…）过渡（…）持续时间（……）。ATTR（…）。ATTR（…）。ATTR（…）。ATTR （…）。attr（…）。attr（…）。attr（…）。attr（…）。on不是函数

并且由于这些错误，脚本的其余部分无法正常工作并且图表正确显示。 任何帮助将不胜感激。

Answer 1

在.on(...)之前添加.on(...)调用，那么它应该没问题。

Answer 2

调用.transition()将返回转换，而不是selectAll("bar") 。 因此，在调用.on()之后调用.on() ，您试图将事件侦听器附加到转换，而不是附加到selectAll("bar")选择中的元素。 将调用移到.on()调用上方的.on() ，你将摆脱错误。

很多示例代码在transition对象上使用.style()和.attr() ，对于那些学习D3的人来说，好像他们在选择上运行一样。 情况并非如此，因为这些运营商实际上设置了transition的结束状态。 虽然这与选择操作基本上具有相同的结果，但它可能会给像我们这样的新人造成混淆。