我试图在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(...)之前添加.on(...)调用，那么它应该没问题。
调用.transition()将返回转换，而不是selectAll("bar") 。 因此，在调用.on()之后调用.on() ，您试图将事件侦听器附加到转换，而不是附加到selectAll("bar")选择中的元素。 将调用移到.on()调用上方的.on() ，你将摆脱错误。
很多示例代码在transition对象上使用.style()和.attr() ，对于那些学习D3的人来说，好像他们在选择上运行一样。 情况并非如此，因为这些运营商实际上设置了transition的结束状态。 虽然这与选择操作基本上具有相同的结果，但它可能会给像我们这样的新人造成混淆。
需要了解更多jQuery教程分享在d3中应用转换时出错，都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
以上就是jQuery教程分享在d3中应用转换时出错相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/982146.html