Smooth Transition of Path using Specified Styling

I am fairly new to this community, and I’m also not the most articulate person. I hope I’m not upsetting the powers that be by posting a new question. The reason I am posting again is because I have conveyed my original question very poorly. Even after repeated edits the confusion seemed to be irreparable.

My question is as follows:

I would like to use stroke-dasharray (or other means) to animate a path. It’s basically a vertical path, no fancy coordinates. From all the examples I’ve seen, the path that is ‘animated’ is a solid line. I would like to animate a dotted line styled path.

From my observations, the stroke-dasharray is used as a means to an end to have a smooth animation for a path. If I’m not mistaken, does that mean one can no longer us stroke-dasharraay for styling purposes? Do you have to choose how to utilize it like a zero-sum type of situation, either only animation, or only style?

To reiterate, I’d like to animate using a dotted line styled path, and I’m not sure how to do that, given current examples/ code syntax.

Please advise on what can be brought to bear to animate a dash-styled path’s entry as it is appended (in my case when called by a button event). I’d like to have the path be drawn from the bottom to the top with style: stroke-dasharray, '5,3'.

This revision has been pre-revised to minimized confusion. I have learned a lot already, and I hope that this question will illuminate those small virtual spaces that have not surfaced yet.

If there is still confusion please feel free to call me out and allow me to clarify.

Thank you for reading

Answer

You could ‘grow’ a line making a transition from 0px to total-lenghtpx. Like so:

var points = [
  [100, 10],
  [100, 10]
];

var line = d3.svg.line()

var svg = d3.select("body").append("svg")
        .datum(points)
    .attr("width", 960)
    .attr("height", 500);

svg.append("path")
    .attr("id","grow")
    .style("stroke-dasharray", "5,3")    
    .attr("d", line)
    .transition()
      .duration(7500)                // <-- transition time
      .attr("d", "M100,400L100,10")  // <-- final lenght

Here the working code

Not the most optimized option. Here’s a clean one:

<style>
line {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
  stroke-dasharray:5 3;
}
</style>
<script>
var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);

svg.append('line')
  .attr({
    x1: 25,
     y1: 400,
    x2: 25,
     y2: 400
  })
  .transition()
  .duration(1500)
  .attr({
    x2: 25,
    y2: 15
  })
</script>

Advertisement

Answer