Question

我使用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时存在许多陷阱（有关详细信息，请参阅我的answer至"Style a d3 element with jQuery and CSS"）。如果可能的话，你应该避免这样做。由于您的问题被标记为d3，因此您应该坚持使用专门用于处理SVG的库。

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

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

＆＃13;

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;
}

＆＃13;

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

＆＃13;

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/

希望这个帮助

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

2 个答案: