Question

编写一个函数，在调用某些元素时为其设置动画，但我无法设置任何类型的transition.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中使用的确切语法（如下所示）。如果我排除指示的行，我的程序功能完美。 出了什么问题？

＆＃13;

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Easing Test</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
	<script>
		var dataset = ["linear", "quad", "cubic", "sin", "exp", "circle", "elastic", "back", "bounce"]
			width = 960,
			height = 500,
			xPadding = 300,
			yPadding = 30,
			r = 20;

		var svg = d3.select("body").append("svg")
					.attr({
						width: width,
						height: height
					});

		svg.selectAll("text")
			.data(dataset)
			.enter()
			.append("text")
			.attr({
				x: xPadding,
				y: function(d, i){ return i * (height/dataset.length) + yPadding; },
				dx: -100,
				dy: 5,
				"font-size": 18
			})
			.style("text-anchor", "middle")
			.text(function(d){ return d; });

		svg.selectAll("line")
			.data(dataset)
			.enter()
			.append("line")
			.attr({
				x1: xPadding,
				y1: function(d, i){ return i * (height/dataset.length) + yPadding; },
				x2: width-xPadding,
				y2: function(d, i){ return i * (height/dataset.length) + yPadding; },
				stroke: "darkorange"
			})

		svg.selectAll("circle")
			.data(dataset)
			.enter()
			.append("circle")
			.attr("class", function(d){ return d; })
			.attr({
				cx: xPadding,
				cy: function(d, i){ return i * (height/dataset.length) + yPadding; },
				r: r,
				fill: "orange"
			})
			.on("mouseover", function(d){
				d3.select(this).attr("fill", "green");
			})
			.on("mouseout", function(d){
				d3.select(this).attr("fill", "orange");
			})
			.on("click", function(d){
				d3.select(this)
					.transition()
					.duration(1000)
					.ease(d)
					.attr("cx", width-xPadding)
					.each("end", function(){
						d3.select(this)
							.transition()
							.delay(500)
							.duration(500)
							.attr({
								cx: xPadding
							})
					})
			})

	</script>
</body>
</html>

＆＃13;

Answer 1

您使用的是哪个版本的d3？如果是v4，请将其替换为

transition.ease(d3.easeLinear)

有关3.x和4.0之间的更改，请参阅this

API Reference

Answer 2

只需添加该过渡（d3.easeLinear）在v5中对我有效

D3动画问题：轻松

2 个答案: