SVG/D3组闪烁一次，然后过渡

Question

我有一组创建如下：

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

再往下的代码，我这个这样的组将在褪色：

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

我无法弄清楚为什么这些团体会在其淡入之前闪现一次或多次。当我将上述转折线评论出来时，这些团体保持隐身状态。这应该意味着什么都没有引起闪光。我很难过......

Answer 1

当通过style应用转换时D3尝试插入字符串中的值，并且可能出错。尝试将不透明度转换为属性，而不是将其包含在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");