使用D3.js随机创建的移动圆 [英] Moving circles randomly created using D3.js

问题描述

我开发了一个使用D3.js的网络应用程序，其中有100个圆圈。

这里是我尝试使用jQuery：

  setInterval（function（）{
 $（'。circle_Negative'）每个函数（）{
 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本身做更好的方法。在尝试使用jQuery操作SVG时遇到许多陷阱（请参阅我的 answer to 使用jQuery和CSS风格d3元素 了解详情）。如果可能，你应该避免这样做。由于您的问题标记为 d3 ，您应该坚持

通过利用D3的将数据绑定到DOM元素的概念，这进一步使您能够将底层数据的操作与更新圈子位置。

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

>

  const width = 400，height = 400，offset = 2; //创建包含所有圆的初始坐标的数据数组。 var data = d3.range（100）.map（（）=> {return {cx：Math.floor（Math.random（）* width），cy：Math.floor（Math.random r：2};}）; //使用D3的数据绑定来设置circles.circles = d3.select（body）.append（svg）.attr（width，width）高度，高度）.selectAll（circle）.data（data）.enter（）。append（circle）.attrs（d => d）; //设置intervalsetInterval //更新绑定到圆的数据。data.forEach（d => {d.cx + = getRandomOffset（）; d.cy + = getRandomOffset（）; }）; //根据数据更新圆的位置。 circle.attrs（d => d）}，50）; function getRandomOffset（）{return（Math.random（）* 2 * offset） -  offset;}  

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

div>

I have developed a web application using D3.js in which there are 100 circles. I want the circles to move slightly (by 2px randomly) and smoothly all the time.

Here is what I have tried using 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];    
}

But this is not at all smooth. I think there could be better ways by which it can be done using D3 itself but I could not figure out much.

解决方案

There are many pitfalls when trying to manipulate SVGs with jQuery (see my answer to "Style a d3 element with jQuery and CSS" for more details). If possible, you should avoid doing so. Since your question is tagged d3 you should stick to that library, which was specifically designed to work on SVGs.

By leveraging D3's concept of binding data to DOM elements this further enables you to separate the manipulation of the underlying data from the update of the circles positions. Within each iteration you calculate the new values and adjust the visual positions accordingly.

The following snippet shows how this might be done:

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

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

这篇关于使用D3.js随机创建的移动圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！