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");