1
Написание функции для анимации некоторых элементов при ее вызове, однако я не могу установить какой-либо вид transition.ease().D3 Animation Issue: ease
var circles = canvas.selectAll("circle")
.data(orgs)
.enter().append('circle')
.attr('cx', function(d, i) {
d = orgs[i][0];
return d;
})
.attr('cy', function(d, i) {
d = orgs[i][1];
return d;
})
.attr('r', 5)
.attr('fill', 'rgb(255, 0, 213)');
function update() {
for (var i = 0; i < numBodies; i++) {
var dx = 0;
var dy = 0;
for (var j = 0; j < numBodies; j++) {
if (i!=j) {
dx += orgs[j][0];
dy += orgs[j][1];
}
}
dx = dx/(numBodies - 1);
dy = dy/(numBodies - 1);
orgs[i][0]+= (dx-orgs[i][0])/100;
orgs[i][1]+= (dy-orgs[i][1])/100;
}
circles.transition()
.duration(200)
.ease('linear') //THROWS AN ERROR
.attr('cx', function(d, i) {
d = orgs[i][0];
return d;
})
.attr('cy', function(d, i) {
d = orgs[i][1]
return d;
});
}
Я хочу просто использовать линейную интерполяцию анимации для повышения производительности. Я следую точной синтаксисе, используемой в this example (показано ниже). Если я исключаю указанную строку, моя программа отлично работает. Что происходит не так?
<!doctype html>
<html lang="ja">
<head>
\t <meta charset="UTF-8">
\t <title>Easing Test</title>
\t <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
\t <script>
\t \t var dataset = ["linear", "quad", "cubic", "sin", "exp", "circle", "elastic", "back", "bounce"]
\t \t \t width = 960,
\t \t \t height = 500,
\t \t \t xPadding = 300,
\t \t \t yPadding = 30,
\t \t \t r = 20;
\t \t var svg = d3.select("body").append("svg")
\t \t \t \t \t .attr({
\t \t \t \t \t \t width: width,
\t \t \t \t \t \t height: height
\t \t \t \t \t });
\t \t svg.selectAll("text")
\t \t \t .data(dataset)
\t \t \t .enter()
\t \t \t .append("text")
\t \t \t .attr({
\t \t \t \t x: xPadding,
\t \t \t \t y: function(d, i){ return i * (height/dataset.length) + yPadding; },
\t \t \t \t dx: -100,
\t \t \t \t dy: 5,
\t \t \t \t "font-size": 18
\t \t \t })
\t \t \t .style("text-anchor", "middle")
\t \t \t .text(function(d){ return d; });
\t \t svg.selectAll("line")
\t \t \t .data(dataset)
\t \t \t .enter()
\t \t \t .append("line")
\t \t \t .attr({
\t \t \t \t x1: xPadding,
\t \t \t \t y1: function(d, i){ return i * (height/dataset.length) + yPadding; },
\t \t \t \t x2: width-xPadding,
\t \t \t \t y2: function(d, i){ return i * (height/dataset.length) + yPadding; },
\t \t \t \t stroke: "darkorange"
\t \t \t })
\t \t svg.selectAll("circle")
\t \t \t .data(dataset)
\t \t \t .enter()
\t \t \t .append("circle")
\t \t \t .attr("class", function(d){ return d; })
\t \t \t .attr({
\t \t \t \t cx: xPadding,
\t \t \t \t cy: function(d, i){ return i * (height/dataset.length) + yPadding; },
\t \t \t \t r: r,
\t \t \t \t fill: "orange"
\t \t \t })
\t \t \t .on("mouseover", function(d){
\t \t \t \t d3.select(this).attr("fill", "green");
\t \t \t })
\t \t \t .on("mouseout", function(d){
\t \t \t \t d3.select(this).attr("fill", "orange");
\t \t \t })
\t \t \t .on("click", function(d){
\t \t \t \t d3.select(this)
\t \t \t \t \t .transition()
\t \t \t \t \t .duration(1000)
\t \t \t \t \t .ease(d)
\t \t \t \t \t .attr("cx", width-xPadding)
\t \t \t \t \t .each("end", function(){
\t \t \t \t \t \t d3.select(this)
\t \t \t \t \t \t \t .transition()
\t \t \t \t \t \t \t .delay(500)
\t \t \t \t \t \t \t .duration(500)
\t \t \t \t \t \t \t .attr({
\t \t \t \t \t \t \t \t cx: xPadding
\t \t \t \t \t \t \t })
\t \t \t \t \t })
\t \t \t })
\t </script>
</body>
</html>
Какую версию d3 вы используете? Если это v4, замените его на transition.ease (d3.easeLinear) –
Есть ли какая-то документация, в которой перечислены все возможные типы анимации? –
https://github.com/d3/d3-transition/blob/master/README.md#transition_ease –