Javascript d3.js-v3和v4-输入并更新差异

我正在尝试获取

x

和

y

的值，以便使用d3.js v4创建一个圆。使用下面的代码，我成功地创建了类似于图表的圆圈行为，但是当我尝试在v4中运行相同的代码时，它就不再工作了。我知道v4的更新有一些不同之处，但我没有找到任何相关信息。所以我想知道是否有人能帮我在d3.js v4中运行这段代码

下面是使用v3的代码（它将使用v4中断）：

var svg=d3.select（'body'）.append（'svg'））
.attr（'宽度'，250）
.attr（'height'，250）；
//渲染数据
函数渲染（数据）{
//束缚
var circles=svg.selectAll（'circle'）.data（数据）；
//进入
circles.enter（）.append（'circle'）
.attr（'r'，10）；
//更新
圈子
.attr（'cx'，函数（d）{
返回d.x；
})
.attr（'cy'，函数（d）{
返回d.y；
});
//出口
circles.exit（）.remove（）；
}
变量myObjects=[{
x:100，
y:100
}, {
x:130，
y:120
}, {
x:80，
y:180
}, {
x:180，
y:80
}, {
x:180，
y:40
}];
渲染（myObjects）
更新模式在d3v4中已更改。
摘自：

此外，selection.append不再将进入的节点合并到
更新选择；使用selection.merge组合输入和更新
在数据联接之后

您应该按以下方式重写代码：


var svg=d3.select（'body'）.append（'svg'））
.attr（'宽度'，250）
.attr（'height'，250）；
//渲染数据
函数渲染（数据）{
//束缚
var circles=svg.selectAll（'circle'）.data（数据）；
//进入
circles.enter（）.append（'circle'）
.attr（'r'，10）.merge（circles）/这是预期的行为，我之前在中已经解释过（但不是重复）

发生的事情是，D3创建者迈克·博斯托克（Mike Bostock）在D3 v2中引入了一种神奇的行为，他将其保留在D3 v3.x中，但决定在D3 v4.x中放弃。要了解更多信息，请看这里：这是他所说的：

D3 2.0引入了一个变化：添加到enter选择将把输入元素复制到更新选择[…]D3 4.0取消了enter.append的魔力。（事实上，D3 4.0完全取消了enter和普通选择之间的区别：现在只有一类选择。）

让我们看看

以下是D3 v3的代码：


var svg=d3.select（'body'）.append（'svg'））
.attr（'宽度'，250）
.attr（'height'，250）；
//渲染数据
函数渲染（数据）{
//束缚
var circles=svg.selectAll（'circle'）.data（数据）；
//进入
circles.enter（）.append（'circle'）
.attr（'r'，10）；
//更新
圈子
.attr（'cx'，函数（d）{
返回d.x；
})
.attr（'cy'，函数（d）{
返回d.y；
});
//出口
circles.exit（）.remove（）；
}
变量myObjects=[{
x:100，
y:100
}, {
x:130，
y:120
}, {
x:80，
y:180
}, {
x:180，
y:80
}, {
x:180，
y:40
}];
渲染（MyObject）；
谢谢你的回答，这对我帮助很大！谢谢你的回答，我现在明白了v3和v4之间的区别。