在d3中应用转换时出错

问题描述

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

I am trying to apply some transition effect on bar graph i designed in d3. Here is my code-

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 （......）。数据（......）。输入（...）。追加（...）。ATTR（...）。追加（...）。ATTR（...）。ATTR（ ...）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（...）过渡（。 ..）。duration（...）。attr（...）。attr（...）。attr（...）。on不是函数
TypeError：bars.append（... ）.attr（...）。ATTR（...）过渡（...）持续时间（......）。ATTR（...）。ATTR（...）过渡（...） .duration（...）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（...）。ATTR（...）。 attr（...）。attr（...）。on不是函数

Transition seem to be working fine except for the fact that I am receiving following errors on browser consoleTypeError: svg.selectAll(...).data(...).enter(...).append(...).attr(...).append(...).attr(...).attr(...).attr(...).attr(...).attr(...).attr(...).attr(...).attr(...).transition(...).duration(...).attr(...).attr(...).attr(...).on is not a function TypeError: bars.append(...).attr(...).attr(...).transition(...).duration(...).attr(...).attr(...).transition(...).duration(...).attr(...).attr(...).attr(...).attr(...).attr(...).attr(...).attr(...).attr(...).on is not a function

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

And because of these error rest of the script is not working properly and graphs are displayed properly.Any help will be appreciated.

推荐答案

添加 .on（...） 在 .transition（）之前调用，那么它应该没问题。

Add the .on(...) call before the .transition(), then it should be fine.

这篇关于在d3中应用转换时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！