D3 wrong fill color on start of a transition from line to area

Question

I am trying to tween from a line to a area. When starting the animation the fill color of the area (polygon) is black. I tried to asign

style("fill", "none")

as I wanted it to start from a transparent fill color. But it still keeps fading from black to the desired color.

Here is how I did the transition

d3.select("#line")
    .transition()
    .duration(dur)
    .delay(del)
    .attr("d", DATA) // old data was a line, new data is an area 
    .style("fill", "red");

Any ideas how to assign a transparent fill color?

Thank you in advanced

Rick

Answer 1

I finally got it. The desired property is not "opacity", it is "fill-opacity". With

d3.select("#line").style("fill-opacity", 0)
    .transition()
    .duration(dur)
    .delay(del)
    .attr("d", DATA) // old data was a line, new data is an area 
    .style("fill-opacity", 1)
    .style("fill", "red");

it works like a charm.

Btw. Thank you Prasath for keeping on it.