个人中心
gpt4 book ai didi

javascript - D3 在鼠标单击时将值更新为新数据集

转载 作者：行者123 更新时间：2023-11-29 19:39:56 25 4
gpt4 key购买 nike

全部，我在更新我用 D3 绘制的一些圆圈的值时遇到了困难。完整代码如下。

您会看到数据集 1 中有 3 个值，数据集 2 中有 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)
    ...

注意:一个通常被忽视的方面是为您绘制的元素赋予特定类的重要性，以便您可以在想要更新它们或以任何其他方式处理它们时通过此类引用它们(class 代码中的圆圈)。我还将第二个过渡移动到较早的点，以便您可以清楚地看到新圆被添加到组中，并且位于正确的位置。

关于javascript - D3 在鼠标单击时将值更新为新数据集，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23767401/

25 4 0
文章推荐： javascript - 如何在上传前从 fineuploader 中删除一些文件
文章推荐： Android 图像与手机和平板电脑尺寸不成比例
文章推荐： android - RecyclerView 不会自动滚动到展开的 ViewHolder 项目
文章推荐： javascript - 用于将字符串拆分为数组并替换数组元素的正则表达式？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com