Question

我试图在D3中编辑创建的圈子的数据。在我的代码下方粘贴了我根据graphData的一些数据创建了很多圈子。

假设我想通过将新数据集转换到新目的地来重新排列我的圈Y位置。怎么做这个任务？我尝试使用attr。（＆＃34; cy＆＃34;，function(d){return yScale(parseFloat(d))}）通过添加data(graphData[i], function(d){return d;}）来更新我的Y坐标和我的新数据，但是这个不起作用。

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

代替以下代码中的for循环，我在X轴的2个刻度上创建了圆圈。我有3组数据，我在小提琴的例子中习惯了它们。我希望能够使用第三个数据集而不是两个圆圈中的第一个数据集。

            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))} );

提前感谢您的帮助！

Answer 1

为了给Lars评论添加一些内容，这里有一个FIDDLE利用输入/更新/退出模式来帮助你。我已经改变并简化了您的代码（和数据），足以证明原理。

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数据按索引关闭...所以，圈子只更新其位置。

如何用D3中的新数据更新选择？

1 个答案: