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上應用過渡時，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");