Can ' t make paths draw rośnie powoli z D3
Korzystając z biblioteki graficznej d3, nie mogę sprawić, by ścieżki rysowały się powoli, aby mogły rosnąć.
Ta strona ma doskonały przykład w sekcji " wykres liniowy (rozwijany)", ale nie podano kodu dla tej sekcji. Czy ktoś mógłby mi pomóc z linijkami kodu D3, które mogłyby to zrobić?
Kiedy próbuję dodać delay () lub duration (), jak w poniższym fragmencie kodu, ścieżka nadal rysuje się natychmiast, a cały kod SVG po ten segment nie jest renderowany.
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);
3 answers
Wierzę ,że "D3 sposób" to zrobić za pomocą niestandardowej funkcji animacji. Możesz zobaczyć działającą implementację tutaj: http://jsfiddle.net/nrabinowitz/XytnD/
Zakłada to, że masz generator o nazwie line
ustawiony z d3.svg.line
do obliczenia ścieżki:
// 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)));
};
}
Funkcja pathTween
zwraca tutaj interpolator, który pobiera dany kawałek linii, określony przez to, jak daleko jesteśmy przez przejście, i odpowiednio aktualizuje ścieżkę.
Warto jednak zwrócić uwagę, podejrzewam, że uzyskasz lepszą wydajność i płynniejszą animację, wybierając Łatwą drogę: umieść biały prostokąt (jeśli twoje tło jest proste) lub clipPath
(jeśli twoje tło jest złożone) nad linią i przejedź ją w prawo, aby odsłonić linię pod nią.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-13 01:35:40
Wspólny wzorzec podczas animowania linii w svg ustawia stroke-dasharray
Długość ścieżki, a następnie animuje stroke-dashoffset
:
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
Możesz zobaczyć demo tutaj: http://bl.ocks.org/4063326
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-13 01:42:29
Na podstawie postu, do którego linkujesz, wymyśliłem następujący przykład:
var i = 0,
svg = d3.select("#main");
String.prototype.repeat = function(times) {
return (new Array(times + 1)).join(this);
}
segments = [{x:35, y: 48}, {x: 22, y: 48}, {x: 22, y: 35}, {x: 34, y:35}, {x: 34, y:60}];
line = "M"+segments[0].x + " " + segments[0].y
new_line = line + (" L" + segments[0].x + " " + segments[0].y).repeat(segments.length);
var mpath = svg.append ('path').attr ('d',new_line )
.attr ('fill', 'none')
.attr ('stroke', 'blue')
for (i=0; i<segments.length; i++)
{
new_segment = " " + "L"+segments[i].x + " " + segments[i].y
new_line = line + new_segment.repeat(segments.length-i)
mpath.transition().attr('d',new_line).duration(1000).delay(i*1000);
line = line + new_segment
}
Jest trochę brzydki, ale działa. Możesz to zobaczyć na jsFiddle Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-13 01:11:16