不能使路径绘制与D3缓慢增长 [英] Can't make paths draw growing slowly with D3

问题描述

使用d3图形库，我似乎不能使路径绘制缓慢，所以他们可以看到增长。

本网站< a>在折线图（展开）部分有一个完美的例子，但没有为该部分给出代码。

当我尝试追加delay（）或duration（）时，如下面的代码片段，路径仍然立即绘制，并且此段之后的所有SVG代码无法呈现。

  var mpath = svg.append '路径'）; 
 mpath.attr（'d'，'M35 48 L22 48 L22 35 L22 22 L35 22 L35 35 L48 35 L48 48'）
 .attr（'fill'，'none'）
 .attr（'stroke'，'blue'）
 .duration（1000）; 
  

解决方案

我相信D3方式具有自定义补间功能。您可以在这里查看有效的实施： http://jsfiddle.net/nrabinowitz/XytnD/ p>

这假设你有一个名为 line 的生成器 d3.svg.line 计算路径：

  //在
中添加元素和转换var path = svg .append（'path'）
 .attr（'class'，'line'）
 .attr（'d'，line（data [0]））
 .transition b $ b .duration（1000）
 .attrTween（'d'，pathTween）; 
 
 function pathTween（）{
 var interpolate = d3.scale.quantile（）
 .domain（[0,1]）$ ​​b $ b .range （1，data.length + 1））; 
 return function（t）{
 return line（data.slice（0，interpolate（t）））; 
}; 
} 
  

pathTween 函数在这里返回一个插值器，它接受一个给定的线段，由我们通过转换的距离，并相应地更新路径。

这是值得注意的，虽然，我怀疑你会得到更好的性能和更流畅的动画通过采取简单的路线：放一个白色的矩形（如果你的背景很简单）或 clipPath （如果你的背景是复杂的），并将其过渡到右侧以显示下面的线。

Using the d3 graphics library, I can't seem to make paths draw slowly so they can be seen growing.

This site has a perfect example in the "Line Chart (Unrolling)" section, but no code is given for that section. Could someone please help me with the lines of D3 code that could make that happen?

When I try appending delay() or duration() such as in the following code snippet, the path still draws immediately, And all the SVG code after this segment fails to render.

    var mpath = svg.append ('path');
        mpath.attr ('d', 'M35 48 L22 48 L22 35 L22 22 L35 22 L35 35 L48 35 L48 48')
             .attr ('fill', 'none')
             .attr ('stroke', 'blue')
             .duration (1000);

解决方案

I believe the "D3 way" to do this is with a custom tween function. You can see a working implementation here: http://jsfiddle.net/nrabinowitz/XytnD/

This assumes that you have a generator called line set up with d3.svg.line to calculate the path:

// add element and transition in
var path = svg.append('path')
    .attr('class', 'line')
    .attr('d', line(data[0]))
  .transition()
    .duration(1000)
    .attrTween('d', pathTween);

function pathTween() {
    var interpolate = d3.scale.quantile()
            .domain([0,1])
            .range(d3.range(1, data.length + 1));
    return function(t) {
        return line(data.slice(0, interpolate(t)));
    };
}​

The pathTween function here returns an interpolator that takes a given slice of the line, defined by how far we are through the transition, and updates the path accordingly.

It's worth noting, though, that I suspect you'd get better performance and a smoother animation by taking the easy route: put a white rectangle (if your background is simple) or a clipPath (if your background is complex) over the line, and transition it over to the right to reveal the line underneath.

这篇关于不能使路径绘制与D3缓慢增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！