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