Javascript D3鼠标单击时将值更新到新数据集_Javascript_Svg_D3.js

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

javascript svg d3.js

Javascript D3鼠标单击时将值更新到新数据集,javascript,svg,d3.js,Javascript,Svg,D3.js,总之，我很难更新我用D3绘制的一些圆的值。整个代码如下您将看到dataset1中有3个值，dataset2中有4个值我只想通过鼠标点击按钮将圆圈从dataset1更新为dataset2 但是，当我运行这段代码时，只有dataset2的前三个值被更新，第四个值丢失。这一定是因为dataset1只有3个值，因此只更新dataset2中的前3个值感谢您的回复，告诉我我需要做什么，而不仅仅是做更新之类的事情。我已经搜索了很多，但大多数回复都是模糊的非常感谢你的帮助 <html>

总之，我很难更新我用D3绘制的一些圆的值。整个代码如下

您将看到dataset1中有3个值，dataset2中有4个值

我只想通过鼠标点击按钮将圆圈从dataset1更新为dataset2

但是，当我运行这段代码时，只有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>


更新数据
测试
点击我
var数据集1=[30,90150]；
var数据集2=[5,30100,79]；
d3.选择全部（“h”）
.append（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）
.selectAll（“圆圈”）
.attr（“id”、“mastercircle”）
.append（“svg”）
.数据（数据集1）
.输入（）
.附加（“圆圈”）
.attr（“id”、“mycircle”）
.attr（“cy”，90）
.attr（“cx”，字符串）
.attr（“r”，Math.sqrt）
.attr（“填充”、“绿色”）
.style（“不透明度”，1）
.transition（）.持续时间（600）
.样式（“不透明度”，0.5）
;
函数推子（）{
d3.选择全部（“我的圆圈”）
.数据（数据集2）
.attr（“cy”，90）
.attr（“cx”，字符串）
.attr（“r”，Math.sqrt）
.attr（“填充”、“红色”）
.style（“不透明度”，1）
.transition（）.持续时间（1000）
.样式（“不透明度”，0.5）
;
};

请参阅完全展开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>


删除
测试
点击我
var数据集1=[30,90,150]；
var数据集2=[5,30,100,79]；
d3.select（“#h”）//p必须加载才能工作，即在代码之上
.append（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）
.selectAll（“圆圈”）
.数据（数据集1）
//上面的sel
.输入（）
.附加（“圆圈”）
.attr（“类”、“圆”）
.attr（“cy”，90）
.attr（“cx”，字符串）
.attr（“r”，Math.sqrt）
.attr（“填充”、“绿色”）
.style（“不透明度”，1）
.transition（）.持续时间（600）
.样式（“不透明度”，0.5）
;
函数推子（）{
d3.选择（“h”）
.append（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）
//.selectAll（“圆圈”）
//.数据（数据集1）
.selectAll（“.circles”）
.数据（数据集2）
.enter（）//输入所选内容
.附加（“圆圈”）
.attr（“类”、“圆”）
//更新选择
.transition（）.持续时间（1000）
.attr（“cy”，90）
.attr（“cx”，字符串）
.attr（“r”，Math.sqrt）
.attr（“填充”、“红色”）
.style（“不透明度”，1）
.样式（“不透明度”，0.5）；
};
d3.选择（“更新”）。在（“单击”，音量控制器）上；

关于了解进入/更新/退出模式有很多参考资料，其中最流行的是D3的创建者

我已经将这一重要模式应用到您的代码中，并将其放在下面的示例中。您可以查看代码（带有关键注释）并与Mike帖子中的解释进行比较

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

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

注意：一个经常被忽略的方面是为您绘制的元素指定一个特定类的重要性，这样当您想要更新它们或以任何其他方式处理它们时（类

在代码中圈出）。我还将第二个过渡点移到了前面的一点，这样您就可以清楚地看到新的圆圈被添加到组中，并且处于正确的位置。
非常感谢，在小提琴上读了大约5遍后，我想我明白了发生了什么。我从来没有遇到过一个恰当的退出和移除的例子。我不明白的一件事是，为什么在应用选择之前退出它？i、 e.Sel.exit（）.remove（）…然后继续进入（）？？。我会读你的链接。你的提琴例子很清楚，虽然我不太理解移除和退出。干杯。你也可以将退出选择放在进入/更新之后……这并不重要……这些是D3已计划/分配删除的元素，不参与进入/更新选择。在您的示例中，退出选择并不是真正需要的，因为您并没有删除任何元素……但我总是使用它，因为它不会造成伤害，并且在您需要它时它会在那里。这形成了一个好习惯：）谢谢，最后一件事，d3.选择（#更新”）。在（（单击），音量控制器）；真的吗？我知道它引用了音量控制器的功能。我原来的按钮是点击我。我猜它没有以任何方式引用D3？它选择按钮并向其添加onclick事件侦听器，即您的函数fader（）
。这只是做同样事情的另一种方法，但使用D3。好的，我已经看完了代码，可以看到发生了什么。有一件事我不明白。函数fader开头的代码扩展为：sel=svg.selectAll（“.circles”）？它涵盖的所有代码是什么？我正在尝试将您的所有代码扩展为一个长D3语句，以便我能够理解每一位正在做什么。非常感谢。看看我上面修改过的代码-可能是因为我没有退出，所以它仍然不能正常工作？