我正在尝试对我在 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]);
})
除了我在浏览器控制台上收到以下错误之外,转换似乎工作正常 类型错误: svg.selectAll(...).data(...).enter(...).append(...).attr(...).append(...).attr(.. .).attr(...).attr(...).attr(...).attr(...).attr(...).attr(...).attr(... ).transition(...).duration(...).attr(...).attr(...).attr(...).on 不是函数 类型错误:bars.append(...).attr(...).attr(...).transition(...).duration(...).attr(...).attr(.. .).transition(...).duration(...).attr(...).attr(...).attr(...).attr(...).attr(... ).attr(...).attr(...).attr(...).on 不是函数
由于这些错误,脚本的其余部分无法正常工作并且图表无法正确显示。 任何帮助将不胜感激。
最佳答案
在.transition()
之前添加.on(...)
调用,那么应该没问题。
关于javascript - 在 d3 中应用转换时出现错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30184225/