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