Question

我是d3的新手，下面的示例使用Leaflet和D3.js为路径设置动画：Tutorial Link

点击此链接后，我想在时间大于10之后更改线条的颜色。之后，我意识到我应该看的功能是

     function tweenDash() {
            return function(t) {
                //total length of path (single value)
                var l = linePath.node().getTotalLength(); 


                interpolate = d3.interpolateString("0," + l, l + "," + l);
                //t is fraction of time 0-1 since transition began
                var marker = d3.select("#marker");

                // p is the point on the line (coordinates) at a given length
                // along the line. In this case if l=50 and we're midway through
                // the time then this would 25.
                var p = linePath.node().getPointAtLength(t * l);
                //Move the marker to that point
                marker.attr("transform", "translate(" + p.x + "," + p.y + ")"); //move marker
                console.log(interpolate(t))
                return interpolate(t);
            }
        } //end tweenDash

所以如果我可以访问tweenDash函数中的时间元素，那么我就可以更改颜色。但是t是插值点，不等于时间计数器。我不确定是否有任何更改方法t之后的线条颜色大于10。我们将不胜感激。

Answer 1

$postRequest = Array( 'headers' => array( ['x-api-key'] => 'srDxd39M2FQxxvfvxxcIohcLfKDcdcRUU' ) 'form_params' => array( [0] => Array ( ['name'] => 'function_key' ['contents'] => 'REGISTER' ) [1] => Array ( ['name'] => 'email' ['contents'] => 'tester@test.com' ) [2] => Array ( ['name'] => 'password' ['contents'] => 'test' ) [3] => Array ( ['name'] => 'name' ['contents'] => 'tester' ) [4] => Array ( ['name'] => 'is_org' ['contents'] => 'N' ) ) ) // Sending Request using 'POST' Method $client = new GuzzleHttp\Client(); $response = $client->request('POST','abcdxyz.com',$getRequest);是动画运行间隔的归一化值t。通常在缓动函数中用于转换[0..1]。

如果动画持续时间为2000毫秒，则t距动画开始的时间为1000毫秒。

因此，要进行计算以确定您拥有t=0.5的{{1}}值。

t是什么？

10中的许多内容对于10都是不变的，因此可以将其放在tweenDash之前，或者只有在缩放重置功能已启用时才可以重新计算由于地图的缩放或平移而被调用。

如何使用D3和传单为不同颜色的线设置动画？

1 个答案: