移动使用D3.js随机创建的圆圈

我使用D3.js开发了一个Web应用程序，其中有100个圆圈。 我希望圆圈稍微移动（随机2px）并且一直平滑。

这是我尝试使用jQuery：

setInterval(function() { $('.circle_Negative').each(function() { var newq = makeNewPosition(); $(this).animate({ cx: +$(this).attr("cx")+newq[0], cy: +$(this).attr("cy")+newq[1] },200); }); }, 200); function makeNewPosition() { var nh = Math.floor(Math.random()*2); var nw = Math.floor(Math.random()*2); return [nh,nw]; } 

但这根本不顺利。 我认为使用D3本身可以有更好的方法，但我想不出多少。

Answer 1

尝试使用jQuery操作SVG时有很多陷阱（有关详细信息，请参阅我的回答 “使用jQuery和CSS设计样式d3元素” ）。 如果可能的话，你应该避免这样做。 由于你的问题被标记为d3，你应该坚持使用专门设计用于SVG的库。

通过利用D3将数据绑定到DOM元素的概念，这进一步使您能够将基础数据的操作与圆形位置的更新分开。 在每次迭代中，您可以计算新值并相应地调整视觉位置。

以下代码段显示了如何完成此操作：

 const width = 400, height = 400, offset = 2; // Create data array containing initial coordinates for all circles. var data = d3.range(100).map(() => { return { cx: Math.floor(Math.random() * width), cy: Math.floor(Math.random() * height), r: 2 }; }); // Using D3's data binding to set up the circles. circles = d3.select("body") .append("svg") .attr("width", width) .attr("height", height) .selectAll("circle") .data(data) .enter().append("circle") .attrs(d => d); // Set the interval setInterval(() => { // Update the data bound to the circles. data.forEach(d => { d.cx += getRandomOffset(); d.cy += getRandomOffset(); }); // Update the circles' positions according to the data. circles.attrs(d => d) }, 50); function getRandomOffset() { return (Math.random() * 2 * offset) - offset; } 

Answer 2

您必须使用.transition（）和.each（“end”，调用函数）。 像这样：

 var svg = d3.select("body") .append("svg") .attr("width", 200) .attr("height", 200); var circle = svg.append("circle") .attr("id", "circ") .attr("cx", Math.random() * 200) .attr("cy", Math.random() * 200) .attr("r", 10 + "px") .transition().each("end", function () { myTransf(); }); function myTransf() { d3.select("#circ").transition().duration(500) .attr("cx", Math.random() * 200) // change this to random 2px .attr("cy", Math.random() * 200) // change this to random 2px .each("end", function () { myTransf(); }); } 

这是jsFiddle： http ： //jsfiddle.net/gnq7vnjg/

希望这有帮助