[英]Getting error on applying transition in 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不是函数
并且由于这些错误,脚本的其余部分无法正常工作,并且图形无法正确显示。 任何帮助将不胜感激。
添加.on(...)
的前调用.transition()
那么它应该是罚款。
调用.transition()
将返回转换,而不是selectAll("bar")
。 因此,通过调用.on()
调用后.transition()
你正在尝试将事件侦听器附加到过渡,而不是附加在元素selectAll("bar")
的选择。 移动呼叫.on()
以上.transition()
调用,你会摆脱错误的。
许多示例代码在transition
对象上使用.style()
和.attr()
,对于学习D3的人来说,它们似乎好像是在对所选内容进行操作。 事实并非如此,因为这些运算符实际上设置了transition
的结束状态。 尽管这实际上与选择操作具有相同的结果,但可能会使像我们这样的新人感到困惑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.