SVG/D3 Group Flashes Once and then Transition

Question

I have a group created as follows:

 d3.select("#" + chartId).selectAll("g.barChart")
    .append("g")
        .attr("class", "bar")
        .attr("id", chartId)
        .attr("style", "opacity:0");

Further down the code, I have this so the group will fade in:

graph = d3.select(".bar#"+chartId);
graph.transition().delay(300).duration(2000).attr("style", "opacity:1.0");

I can't figure out why the groups will flash once or more before it fades in. When I commented out the above transition line, the groups stay invisible. That should mean nothing else is causing the flash. I'm stumped...

Answer 1

When applying transitions over style D3 attempts to interpolate the values from a string, and something might be going wrong. Try transitioning opacity as an attribute instead of including it in style :

 d3.select("#" + chartId).selectAll("g.barChart")
    .append("g")
        .attr("class", "bar")
        .attr("id", chartId)
        .attr("opacity", "0");

graph = d3.select(".bar#"+chartId);
graph.transition().delay(300).duration(2000).attr("opacity", "1");