在d3中应用转换时出错

Question

我试图在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不是函数

并且由于这些错误,脚本的其余部分无法正常工作并且图形正确显示.任何帮助将不胜感激.

Answer 1

在.on(...)之前添加电话.transition(),那应该没问题.