我试图在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不是函数
并且由于这些错误，脚本的其余部分无法正常工作并且图形正确显示 . 任何帮助将不胜感激 .
2 回答
调用
.transition()将返回转换，而不是selectAll("bar")的结果 . 因此，在调用.transition()之后调用.on()时，您试图将事件侦听器附加到转换，而不是附加到selectAll("bar")选择中的元素 . 将调用移至.transition()上方的.on()，您将摆脱错误 .很多示例代码在
transition对象上使用.style()和.attr()，对于那些学习D3的人来说，好像他们在选择上运行一样 . 情况并非如此，因为这些运算符实际上设置了transition的结束状态 . 虽然这与选择操作基本上具有相同的结果，但它可能会给像我们这样的新人造成混淆 .在
.transition()之前添加.on(...)调用，那么它应该没问题 .