javascript - Simple path transition - Stack Overflow

admin管理员组

文章数量:1277896

I am trying to implement a simple path transition as shown here. I'm no javascript nor d3 magician, so I tried to give it my best shot:

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line)
  .transition().duration(next.duration||1000).delay(next.delay||0); # not right

How do I get the transition to work properly?

I am trying to implement a simple path transition as shown here. I'm no javascript nor d3 magician, so I tried to give it my best shot:

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line)
  .transition().duration(next.duration||1000).delay(next.delay||0); # not right

How do I get the transition to work properly?

• javascript
• d3.js

Share Improve this question Follow asked Nov 15, 2012 at 23:38 user_78361084user_78361084 3,9282424 gold badges9494 silver badges162162 bronze badges 1

• See also stackoverflow./questions/14275249/… – Phrogz Commented Jan 11, 2013 at 16:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

One way to do path drawing animation in d3 is to use the dash-array and dash-offset attributes.

What you can do is set the dashoffset to the total path length, then decrease the dashoffset over time until it is zero. This will simulate the path being drawn. Check out the SVG docs on stroke-dasharray and stroke-dashoffset.

Conceptually, what you are doing is this:

Say your line is 4 units long (----). You are setting the dasharray to be (----,,,,) i.e. four units and then four spaces. You set the dashoffset to be 4 units, so the line will lie 4 units to the left of the visible space. Then, as you decrease dashoffset to 0, the line will look like (-,,,,) and then (--,,,,) and so on until the whole line is drawn.

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); });

var path = svg.append("path")
                  .attr("d", line(data))
                  .classed("line", true);

var pathLength= path.node().getTotalLength();

path
  .attr("stroke-dasharray", pathLength + " " + pathLength)
  .attr("stroke-dashoffset", pathLength)
  .transition()
  .duration(2000)
  .ease("linear")
  .attr("stroke-dashoffset", 0);

-

Learned from Duopixel's post here.

本文标签： javascriptSimple path transitionStack Overflow