如何用D3中的新数据更新选择？ [英] How to update selection with new data in D3?

问题描述

我正在尝试在D3中编辑已创建圈子的数据。下面我的代码是粘贴我根据一些数据从 graphData 创建了很多圈子。

d想通过将新的数据集转换到新的目标位置，重新排列我的圈子Y位置。如何执行此任务？我试过使用 attr （cy， function（d）{return yScale（parseFloat（d））} ）通过向我的新数据添加数据（graphData [i]，function（d）{return d;} ）来更新我的Y坐标，工作。

您可以查看我的JSFiddle： http://jsfiddle.net/RBr8h/1/

在下面的代码中，我已经创建了两个ticks的圆圈我的X轴。我有3套数据，我已经习惯了他们在例子中的小提琴。我想要使​​用第三个数据集，而不是两个圈子中的前两个。

  var circle; 
 for（var i = 0; i  circle = SVGbody 
 .selectAll（circle）
 .data（graphData [i] ，function（d）{return d;}）
 .enter（）
 .append（circle）
 .attr（cx，xScale（0））
 .attr（cy，yScale（minAxisY））
 .attr（r，4）
 .style（'opacity'，0）
 .transition（）
 .duration（1000）
 .attr（cx，function（d）{
 return spreadCircles（i）; 
}）
 //.attr函数（d，i）{return yScale（i）;}）
 .style（'opacity'，1）
 .transition（）
。 attr（cy，function（d）{return yScale（parseFloat（d））}）;感谢您的帮助！
   h2_lin>解决方案
要在Lars评论中加入一些肉体，这里是一个 FIDDLE 利用进入/更新/退出模式帮助你。 
 函数updateCircles（dataset，color）{ 
 var circle = SVGbody 
 .selectAll（circle）
 .data（dataset，function（d）{return d;}）; 
 
 circle 
 .exit（）
 .transition（）。duration（750）
 .attr（r，0）
 .remove ）; 
 
 circle 
 .enter（）
 .append（circle）; 
 
 circle 
 .attr（cx，function（d）{return xScale（100）;}）
 .attr（cy，function（d）{return yScale（parseFloat（d））}）
 .attr（r，0）
 .transition（）。duration（1500）
 .attr（r，5）
 .style（fill，color）; 
}; 
  
 更新小提示，数据由索引关闭...所以，圆圈的位置已更新。
 
I'm trying to edit the data of created circles in D3. Below my code is pasted of me creating a lot of circles based on some data from graphData.

Supposed I'd want to re-arrange my circles Y position with a new dataset, by transitioning them to their new destinations. How would perform this task? I've tried using attr.("cy", function(d){return yScale(parseFloat(d))} ) to update my Y-coordinates by adding data(graphData[i], function(d){return d;}) with my new data, but this does not work.

You can take a look at my JSFiddle: http://jsfiddle.net/RBr8h/1/

Instead of the for-loop in the following code I've created circles on 2 ticks of my X-axis. I have 3 sets of data and I've used to of them in the example in the fiddle. I'd like to able to use the 3rd dataset instead of the 2 first ones on both circles.
            var circle;
            for(var i = 0;i < graphData.length;i++){
                circle = SVGbody
                    .selectAll("circle")
                    .data(graphData[i], function(d){return d;})
                    .enter()
                        .append("circle")
                        .attr("cx",xScale(0))
                        .attr("cy", yScale(minAxisY))
                        .attr("r",4)
                        .style('opacity', 0)
                        .transition()
                        .duration(1000)
                        .attr("cx", function(d){
                            return spreadCircles(i);
                        })
                        //.attr("cy", function (d, i){ return yScale(i); })
                        .style('opacity', 1)
                        .transition()
                        .duration(1500)
                            .attr("cy", function(d){return yScale(parseFloat(d))} );
Thank you for your help in advance!
解决方案
To put some flesh on Lars comment, here is a FIDDLE leveraging the enter/update/exit pattern to help you out. I have altered and simplified your code (and data) just enough to demonstrate the principle.
function updateCircles(dataset,color) {
    var circle = SVGbody
        .selectAll("circle")
        .data(dataset, function(d) { return d; });

    circle
        .exit()
        .transition().duration(750)
        .attr("r", 0)
        .remove();

    circle
        .enter()
        .append("circle");

    circle
        .attr("cx",function(d){return xScale(100);})
        .attr("cy",function(d){return yScale(parseFloat(d))})
        .attr("r",0)
        .transition().duration(1500)
        .attr("r",5)
        .style("fill", color);
};
Update fiddle with data keyed off by index...so, circles just have their position updated.

                        
这篇关于如何用D3中的新数据更新选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！