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.

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.

• javascript
• jquery
• svg
• d3.js

• .data(data) is not chainable, try removing that if error persist, or add it at the end of chain – Tushar Commented May 12, 2015 at 7:19
• Thanks for help @Tushar but it didn't work – ValarDohaeris Commented May 12, 2015 at 7:23
• The error is the same, you are using method that is not chainable. – Tushar Commented May 12, 2015 at 7:23
• fun is being executed prematurely. Use .on("click", fun) instead of .attr("onclick"... – Cool Blue Commented May 12, 2015 at 8:10
• @Tushar your ments are incorrect. .data() returns the update selection. Of course it is chainable. – Cool Blue Commented May 12, 2015 at 8:16

2 Answers 2

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

Calling .transition() will return the transition and not the results of your selectAll("bar"). So by calling .on() after calling .transition() you are attempting to attach your event listener to the transition instead of attaching to the elements in the selectAll("bar") selection. Move the call to .on() above the .transition() call and you'll get rid of the error.

Much example code uses .style() and .attr() on the transition object, to those learning D3 it appears as though they are operating on the selection. This is not the case as those operators actually set the end state of a transition. While this essentially has the same result as operating on the selection, it can cause confusion for newer folks like us.