d3.js圆形绘图在第一次尝试加载时无法正常工作

问题是当你从7到10时,你永远不会更新现有的"电子".在你的代码中

var electron_nodes = vis.selectAll('circle.electron')
.data(electrons)
.enter().append("circle")
.attr("class", "electron")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 7)
.on("mouseover", function(d) { 
   // how to drag the electron around the circle?
});

之后的所有内容enter()仅适用于添加的新元素.

这是一个常见的混乱; 我今天早些时候回答了另一个类似的问题,所以我将在这里尝试解释它(然后每个人都可以在将来链接到这个解释!).

链接方法是D3的重要组成部分,但它只能做很多事情.每个人都希望将所有内容链接在一起,但是您必须跟踪链条何时分离成一个enter()或多个exit()选项,然后返回主要选择进行更新.

一般更新例程通常有四个"链"(每个以a结尾;):

一个 选择链,即选择元素,并更新数据,并保存在一个变量的选择,例如,你可以把它var elements

一个输入链,从elements.enter().(您用来保存选择连锁或任何变量名),追加新的元素和设置,都将是恒定的任何属性或样式(即不会改变更新)

一个退出链,首先elements.exit().,与过渡(如果使用)和remove()

一个更新链,从您保存的选择变量开始,然后是所有方法来设置需要更新的属性或样式; 这也将首次在您刚刚创建的元素上设置这些属性.enter()

是的,你可以采取不同的方式,但前提是你清楚地了解发生了什么,以及为什么要改变这种模式.

这种方法还避免了代码中的重复,重新选择电子并重新应用数据以获得exit()选择.

因此,对于您的程序,4链更新方法的应用程序如下所示:

//chain 1: select
var electron_nodes = vis.selectAll('circle.electron')
      .data(electrons); 

//chain 2: enter
electron_nodes.enter().append("circle")
  .attr("class", "electron")
  .on("mouseover", function(d) { 
   // Although this function uses data at the time the event happens, 
   // the actual definition of the function never changes,
   // so you only need to attach it once when you create the node.
  })
  .attr("r", 7); 

//chain 3: exit
electron_nodes.exit().remove(); 

//chain 4: update
electron_nodes.attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; });

对不起,有人花了很长时间才回答你的问题; 这是一个相当复杂的程序,可能会吓跑所有数学函数.将来,您不需要包含AJAX方法(假设您已经检查过它返回了正确的值),但是这将有助于包含AJAX请求返回的数据示例.当然,JSFiddle或Tributary上的一个工作示例甚至更好!

最好的, -
ABR