总之，我在更新用 D3 绘制的一些圆圈的值时遇到困难。完整代码如下。
您将看到 dataset1 中有 3 个值，dataset2 中有 4 个值。
我只想将鼠标单击按钮时的圆圈从数据集 1 更新为数据集 2。
但是，当我运行此代码时，仅更新了 dataset2 的前三个值，第四个值丢失。这一定与 dataset1 只有 3 个值，因此只更新 dataset2 中的前 3 个值有关。
感谢您的回复，它准确地告诉我我需要做什么，而不仅仅是更新或其他操作。我搜索了很多，但大多数回复都很模糊。
非常感谢您的帮助。
<html>
<head>
<script type="text/javascript" src="d3/d3.js"> </script>
<title>update data</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p id = "h">test</p>
<button onclick="fader()">Click me</button>
<script>
var dataset1 = [30,90,150];
var dataset2 = [5,30,100,79];
d3.selectAll("#h")
.append("svg")
.attr("width",200)
.attr("height",200)
.selectAll("circle")
.attr("id","mastercircle")
.append("svg")
.data(dataset1)
.enter()
.append("circle")
.attr("id","mycircle")
.attr("cy", 90)
.attr("cx", String)
.attr("r", Math.sqrt)
.attr("fill","green")
.style("opacity", 1)
.transition().duration(600)
.style("opacity", 0.5)
;
function fader() {
d3.selectAll("#mycircle")
.data(dataset2)
.attr("cy", 90)
.attr("cx", String)
.attr("r", Math.sqrt)
.attr("fill","red")
.style("opacity", 1)
.transition().duration(1000)
.style("opacity", 0.5)
;
};
</script>
</body>
</html>
完全展开 FIDDLE 代码后查看代码。现在它会添加新数据，但不会删除旧数据。如果您能告诉我需要在哪里退出和删除，我将不胜感激？
只是试图准确了解正在发生的情况，而不使用变量来了解 D3 实际在做什么。
<html>
<head>
<script type="text/javascript" src="d3/d3.js"> </script>
<title>Delete</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p id = "h">test</p>
<button id = "update">Click me</button>
<script>
var dataset1 = [30, 90, 150];
var dataset2 = [5, 30, 100, 79];
d3.select("#h") //p must be loaded for this to work i.e. above the code
.append("svg")
.attr("width",200)
.attr("height",200)
.selectAll("circle")
.data(dataset1)
//sel above
.enter()
.append("circle")
.attr("class","circles")
.attr("cy", 90)
.attr("cx", String)
.attr("r", Math.sqrt)
.attr("fill","green")
.style("opacity", 1)
.transition().duration(600)
.style("opacity", 0.5)
;
function fader() {
d3.select("#h")
.append("svg")
.attr("width",200)
.attr("height",200)
//.selectAll("circle")
//.data(dataset1)
.selectAll(".circles")
.data(dataset2)
.enter() // enter selection
.append("circle")
.attr("class", "circles")
//update selection
.transition().duration(1000)
.attr("cy", 90)
.attr("cx", String)
.attr("r", Math.sqrt)
.attr("fill", "red")
.style("opacity", 1)
.style("opacity", 0.5) ;
};
d3.select("#update").on("click", fader);
</script>
</body>
</html>
最佳答案
有很多资源可以帮助您了解进入/更新/退出模式，其中最受欢迎的资源之一是 Thinking with Joins由 D3 的创建者设计。
我已将这个重要的模式应用到您的代码中，并将其放置在 FIDDLE 中。您可以查看代码(带有关键注释)并与 Mike 帖子中的解释进行比较。
sel
.enter() // enter selection
.append("circle")
.attr("class", "circles");
sel //update selection
.attr("cy", 90)
.attr("cx", String)
...
注意:一个经常被忽视的方面是为您绘制的元素提供特定类的重要性，以便当您想要更新它们或以任何其他方式处理它们时可以通过此类引用它们(类 代码中的圆圈)。我还将第二个过渡移到了较早的位置，以便您可以清楚地看到新圆圈被添加到组中，并且位于正确的位置。
关于javascript - 单击鼠标时 D3 将值更新为新数据集，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23767401/