鼠标单击D3将值更新到新数据集

Question

All, I am having difficulty updating the values of some circles I have drawn with D3. 全部，我很难更新用D3绘制的某些圆的值。 Entire code is below. 完整代码如下。

You will see that there are 3 values in dataset1 and 4 values in dataset2. 您将看到dataset1中有3个值，dataset2中有4个值。

All I simply want to do is update the circles on a mouse click of a button from dataset1 to dataset2. 我只想做的就是在鼠标单击按钮时将圆圈从数据集1更新到数据集2。

However when I run this code, only the first three values of dataset2 are updated, the fourth value is missing. 但是，当我运行此代码时，只有dataset2的前三个值被更新，第四个值丢失了。 this must be something to do with the fact that dataset1 only have 3 values and therefore only updating the first 3 values in dataset2. 这必须与数据集1仅具有3个值，因此仅更新数据集2中的前3个值有关。

Appreciate a response which tells me exactly what I need to do not just something like, do update or something. 欣赏一个可以告诉我确切需要做的事情的响应，而不仅仅是做某事，做更新之类的事情。 I have searched a lot but most responses are vague. 我进行了很多搜索，但大多数回复都含糊不清。

Very grateful for your help. 非常感谢您的帮助。

    <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>

See code after fully expanding the FIDDLE code. 完全扩展FIDDLE代码后，请参见代码。 It now adds the new data but doesn't remove the old data. 现在，它将添加新数据，但不会删除旧数据。 Grateful if you can tell me where I need to exit and remove? 如果您能告诉我我需要在哪里退出和撤离，不胜感激？

Just trying to learn exactly what is going on without using variables to understand what D3 is actually doing. 只是尝试确切地了解正在发生的事情，而没有使用变量来了解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>

Answer 1

There are lots of resources on understanding the enter/update/exit pattern, and one of the most popular is Thinking with Joins by the creator of D3. 关于理解进入/更新/退出模式的资源很多，其中最受欢迎的一种是D3的创建者的“ 思考加入 ”。

I have applied this important pattern to your code and placed it in this FIDDLE . 我已经将此重要模式应用于您的代码，并将其放在此FIDDLE中。 You can look at the code (with key comments) and compare to the explanations in Mike's post. 您可以查看代码（带有关键注释），并与Mike帖子中的解释进行比较。

sel 
    .enter() // enter selection
    .append("circle")
    .attr("class", "circles");

sel //update selection
    .attr("cy", 90)
    .attr("cx", String)
    ...

NOTE: one commonly overlooked aspect is the importance of giving a specific class to the elements you draw so that you can refer to them by this class when you want to update them or handle them in any other way (class circles in the code). 注意：一个通常被忽略的方面是为您绘制的元素提供特定类的重要性，这样，当您想要更新它们或以任何其他方式处理它们（代码中的类circles ）时，可以由此类引用它们。 I also moved the second transition to an earlier point so that you can clearly see the new circle being added to the group, and in the correct position. 我还将第二个过渡移到了较早的位置，这样您就可以清楚地看到新圆已添加到组中并处于正确位置。

鼠标单击D3将值更新到新数据集

问题描述

1 个解决方案

解决方案1
3 已采纳 2014-05-20 19:18:15

鼠标单击D3将值更新到新数据集

问题描述

1 个解决方案

解决方案1 3 已采纳 2014-05-20 19:18:15

解决方案1
3 已采纳 2014-05-20 19:18:15