1
編寫一個函數來調用某些元素的動畫時，但我不能設置任何種類的transition.ease()。D3動畫問題：緩動
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 –