这是我的d3.js代码：
<script>
var width = 300,
height = 300,
margin = 20;
var x_centre = width/2;
var y_centre = height/2;
var nuclear_radius = 15;
var vis = d3.select("#chart_container").append("svg:svg")
.attr("width", width)
.attr("height", height);
var radiuses = [1,2,3];
var multiplier = (d3.min([width, height]) - 2*margin - nuclear_radius) / (d3.max(radiuses) * 2);
var shells = vis.selectAll("circle.shell")
.data(radiuses)
.enter().append("circle")
.attr("class", "shell")
.attr("cx", x_centre)
.attr("cy", y_centre)
.attr("r", function(d, i) {
return (d * multiplier);
});
var nucleus = vis.selectAll('circle.nucleus')
.data(['nucleus'])
.enter().append("circle")
.attr("class", "nucleus")
.attr("cx", x_centre)
.attr("cy", y_centre)
.attr("r", nuclear_radius);
function showGraph(de) {
var electrons = de
var radius_counts = {};
for (var i = 0; i < electrons.length; i++) {
if (electrons[i].distance in radius_counts) {
radius_counts[electrons[i].distance] += 1;
} else {
radius_counts[electrons[i].distance] = 1;
}
}
// Calculate the x- and y-coordinate values
// for each electron.
var keep_count = {};
electrons.forEach(function(d) {
var siblings = radius_counts[d.distance];
if (d.distance in keep_count) {
keep_count[d.distance] += 1;
} else {
keep_count[d.distance] = 1;
}
var angle = (360/siblings) * keep_count[d.distance];
var hyp = d.distance * multiplier;
if (angle <= 90) {
var use_angle = (90 - angle) * (Math.PI/180);
var opp = Math.sin(use_angle) * hyp;
var adj = Math.cos(use_angle) * hyp;
d.x = x_centre + adj;
d.y = y_centre - opp;
} else if (angle <= 180) {
var use_angle = (180 - angle) * (Math.PI/180);
var opp = Math.sin(use_angle) * hyp;
var adj = Math.cos(use_angle) * hyp;
d.x = x_centre + opp;
d.y = y_centre + adj;
} else if (angle <= 270) {
var use_angle = (270 - angle) * (Math.PI/180);
var opp = Math.sin(use_angle) * hyp;
var adj = Math.cos(use_angle) * hyp;
d.x = x_centre - adj;
d.y = y_centre + opp;
} else {
var use_angle = (360 - angle) * (Math.PI/180);
var opp = Math.sin(use_angle) * hyp;
var adj = Math.cos(use_angle) * hyp;
d.x = x_centre - opp;
d.y = y_centre - adj;
}
});
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?
});
var svgData = vis.selectAll("circle.electron")
.data(electrons);
svgData.exit().remove();
}
</script>
现在我每次点击事件时调用上面的showGraph js function，该事件采用count参数
function add_py()
{
var count = $( "#count" ).val();
$.ajax({
type: "get",
url: "abc.py",
data: {'count': count},
datatype:"script",
async: false,
success: function(response) {
var data= JSON.parse(response);
//alert(response)
showGraph(data);
}, // success closed
error:function(xhr,err)
{
alert("Error connecting to server, please contact system administator.");
}
})//ajax closed
}
现在，当我给出计数10时，SVG是这样的：
<svg width="300" height="300">
<circle class="shell" cx="150" cy="150" r="40.833333333333336">
<circle class="shell" cx="150" cy="150" r="81.66666666666667">
<circle class="shell" cx="150" cy="150" r="122.5">
<circle class="nucleus" cx="150" cy="150" r="15">
<circle class="electron" cx="231.66666666666669" cy="150" r="7">
<circle class="electron" cx="256.08811196359375" cy="211.25" r="7">
<circle class="electron" cx="43.91188803640625" cy="211.25" r="7">
<circle class="electron" cx="185.36270398786456" cy="170.41666666666669" r="7">
<circle class="electron" cx="114.63729601213541" cy="170.41666666666666" r="7">
<circle class="electron" cx="150" cy="231.66666666666669" r="7">
<circle class="electron" cx="150" cy="27.5" r="7">
<circle class="electron" cx="150" cy="109.16666666666666" r="7">
<circle class="electron" cx="68.33333333333333" cy="150" r="7">
<circle class="electron" cx="150" cy="68.33333333333333" r="7">
</svg>
使用class electron与不同cx and cy图表完全合作10个圆圈。但是，如果我给第一个计数7或任何小于10然后10，那么svg就像：
<svg width="300" height="300">
<circle class="shell" cx="150" cy="150" r="40.833333333333336">
<circle class="shell" cx="150" cy="150" r="81.66666666666667">
<circle class="shell" cx="150" cy="150" r="122.5">
<circle class="nucleus" cx="150" cy="150" r="15">
<circle class="electron" cx="150" cy="68.33333333333333" r="7">
<circle class="electron" cx="150" cy="272.5" r="7">
<circle class="electron" cx="150" cy="27.5" r="7">
<circle class="electron" cx="150" cy="190.83333333333334" r="7">
<circle class="electron" cx="150" cy="109.16666666666666" r="7">
<circle class="electron" cx="150" cy="231.66666666666669" r="7">
<circle class="electron" cx="150" cy="27.5" r="7">
<circle class="electron" cx="150" cy="109.16666666666666" r="7">
<circle class="electron" cx="68.33333333333333" cy="150" r="7">
<circle class="electron" cx="150" cy="68.33333333333333" r="7">
</svg>
使用class electron精确绘制10个圆圈，但cx和cy重复，以便它们重叠。但是如果我第一次给第10个计数它就没有重叠。如果我给出一个很大的计数，那么它可以正常工作。但不是小而大。在此先感谢帮助我。
答案 0 :(得分：7)
问题是当你从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()选项，然后返回主要选项进行更新。
一般更新例程通常会有四个“链”（每个都以;结尾）：
选择链，用于选择元素并更新数据并保存变量中的选项，例如您可以将其称为{{1} }
输入链，从var elements开始（或用于保存选择链的任何变量名称），附加新元素并设置任何属性或样式将保持不变（即，在更新时不会改变）
退出链，从elements.enter().开始，带有转场（如果使用）和elements.exit().
更新链，从您保存的选择变量开始，然后是设置需要更新的属性或样式的所有方法;这也将首次在您使用remove()
是的，你可以采取不同的做法，但前提是你清楚地了解正在发生的事情，以及你为什么要改变这种模式。
这种方法还避免了代码中的重复，重新选择电子并重新应用数据以获得.enter()选择。
因此，对于您的程序，4链更新方法的应用程序如下所示：
exit()很抱歉，有人花了很长时间才回答你的问题;这是一个相当复杂的程序，可能会吓跑所有数学函数。将来，您不需要包含AJAX方法（假设您已经检查它返回了正确的值），但是这将有助于包含AJAX请求返回的数据的示例。当然，关于JSFiddle或Tributary的一个工作示例甚至更好！
最佳，
--ABR