Javascript D3选择/附加SVG的变更单

我已经创建了一个点阵视觉，如下面的代码片段所示。彩色圆圈表示值，灰色圆圈表示空/未使用。例如，在我的例子中，三种颜色代表来自三个国家的项目的百分比形式的资金：美国、加拿大和墨西哥。灰色表示尚未筹集的资金，也以百分比形式表示

var边距={顶部：20，底部：300，左侧：30，右侧：100}； var高度=600； var宽度=900； var totalWidth=宽度+边距。左+边距。右； var totalHeight=高度+边距。顶部+边距。底部； var svg=d3。选择“body” .append'svg' .attr'width'，totalWidth .attr‘高度’，总高度； var graphGroup=svg.append'g' .attr'transform'，translate+边距.左+，+边距.上+； 风险值数据=[ {'country'：'USA'，'value'：.20}， {'country'：'Canada'，'value'：.15}， {'country'：'Mexico'，'value'：.10} ]; var circArray=新阵列50； var circPercentage=100/circArray.length； var circData=新数组； data.forEachfunctionitem{ 对于var i=0；i在代码中的顺序与circData相同

但实际上你是通过cx和cy来控制位置的，而不是它们的顺序

var边距={顶部：20，底部：300，左侧：30，右侧：100}； var高度=600； var宽度=900； var totalWidth=宽度+边距。左+边距。右； var totalHeight=高度+边距。顶部+边距。底部； var svg=d3。选择“body” .append'svg' .attr'width'，totalWidth .attr‘高度’，总高度； var graphGroup=svg.append'g' .attr'transform'，translate+边距.左+，+边距.上+； 风险值数据=[ {'country'：'USA'，'value'：.20}， {'country'：'Canada'，'value'：.15}， {'country'：'Mexico'，'value'：.10} ]; var circArray=新阵列50； var circPercentage=100/circArray.length； var circData=新数组； data.forEachfunctionitem{ 对于var i=0，它的顺序不是与circData相同吗？我认为在这种情况下，顺序甚至都不重要。