Question

我使用d3.js开发了一种基于cinemetrics的图表。我添加了一系列数据来控制运动速度，但是在不同的数据更新和片段动画之间出现补间动画似乎存在冲突。

补间和动画动画冲突 - 如果可以添加转换结束回调以触发动画动画。
可能会创建颜色渐变/颜色条而不是完整填充的细分

enter image description here

 spike: function () {
        //console.log("spike ready", data);

        var that = this;
       var timeScale = d3.scale.linear()
           .domain([1, 5])
           .range([900,3500, 8000]) //larger movement values have smaller durations
           ;

        function throb(d, i) {

            var dur = timeScale(d.movement);

            var p = d3.select(this);

            if (!p.classed("moving") ) {
                p.transition()
                    .duration(dur)
                    .attr("d", that.getArc(-5))
                .transition()
                    .duration(dur)
                    .attr("d", that.getArc(+5))
                    .each("end", throb);
            }
        }

       //The spike function *returns* the throb function so it can be used in
       // an each call:
       return throb;

    },

Answer 1

我添加了一个基本模式 - 可用于将渐变应用于细分。理想情况下，我希望片段看起来像条纹而不是平滑混合。还希望能够使用来自数据json的颜色数组相应地构建模式。

http://jsfiddle.net/NYEaX/371/

我想确保渐变是从上到下 - 例如，内部部分为红色，外部部分为绿色。也是剥离而不是光滑的混合物。

enter image description here

这是模式的代码

<svg>
    <defs>
    <linearGradient id="matrixLinearGradient"
                                    x1="0%" y1="0%"
                                    x2="100%" y2="100%"
                                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"></stop>
      <stop offset="100%" stop-color="#cc0000" stop-opacity="1"></stop>
    </linearGradient>
    </defs>
</svg>

也看了这个方法，但不确定它的走向与否。 http://jsfiddle.net/Y2zue/

Answer 2

首先解决渐变问题。

enter image description here 这是一个精简的准系统示例 - 饼图，3个数据集，渐变构建器。

我正在尝试使梯度向中心倾斜，因为它是为每个段构建的。所以它看起来更像是正确的图像，而不是它当前的左图。

http://jsfiddle.net/NYEaX/437/

这是代码

我提供了段索引和段数。我不确定这些信息如何有效地用于调整渐变角度，以便模仿正确的图像演示。

createGradient(sliceindex, segmentCount){

            var svg = d3.select(".patterns")

            var rotateAngle = sliceindex*4;

            var gradient = svg.append("svg:defs")
              .append("svg:linearGradient")
                .attr("id", "gradient"+sliceindex)
                .attr("x1", "0%")
                .attr("x2", "100%")
                .attr("y1", "50%")    
                .attr("y2", "50%")
                .attr("spreadMethod", "pad")
                .attr("gradientTransform", "rotate("+rotateAngle+")")

                gradient.append("svg:stop")
                    .attr("offset", "0%")
                    .attr("stop-color", "#0c0")
                    .attr("stop-opacity", 1);

                gradient.append("svg:stop")
                    .attr("offset", "40%")
                    .attr("stop-color", "#ff9f00")
                    .attr("stop-opacity", 1);


                gradient.append("svg:stop")
                    .attr("offset", "70%")
                    .attr("stop-color", "#d500af")
                    .attr("stop-opacity", 1);


                gradient.append("svg:stop")
                    .attr("offset", "100%")
                    .attr("stop-color", "#c00")
                    .attr("stop-opacity", 1);        
}

d3.js cinemetrics基于动画的图表

2 个答案: