SVG / D3组闪烁一次然后转换

时间:2012-10-15 15:44:18

标签: javascript svg d3.js transition

我创建了一个如下组:

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

我无法弄清楚为什么这些组会在淡入之前闪现一次或多次。当我注释掉上面的过渡线时,这些组会保持隐身状态。这应该意味着没有其他因素导致闪光。我很难过......

1 个答案:

答案 0 :(得分: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");