Getting error on applying transition in d3

Question

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]);
            })

Transition seem to be working fine except for the fact that I am receiving following errors on browser console TypeError: 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.

.data(data) is not chainable, try removing that if error persist, or add it at the end of chain — Tushar
The error is the same, you are using method that is not chainable. — Tushar
fun is being executed prematurely. Use .on("click", fun) instead of .attr("onclick"... — Cool Blue
@Tushar your comments are incorrect. .data() returns the update selection. Of course it is chainable. — Cool Blue

ᆼᆺᆼ ᆼᆺᆼ · Accepted Answer · 2015-05-12T10:46:10

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

Getting error on applying transition in d3

2 Answers