Question

我有一些代码可以创建一堆圈子，更新这些圈子，删除一些圈子，最后我想了解如何正确使用enter（）为我当前的圈子添加更多圈子。

这是我的代码，用于在没有圈子的情况下创建圈子：

        var circle = SVGbody
            .selectAll("circle")
            .data(graphDataY/*, function(d){return d;}*/);

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

            circle
                .attr("cx",xScale(0))
                .attr("cy", yScale(minAxisY))
                .attr("r",4)
                .style('opacity', 0)
                .style("fill", colorCircles())
                .transition()
                .duration(1000)
                .attr("cx", function(d, i){ return xScale(graphDataX[i]);})
                //.attr("cy", function (d, i){ return yScale(i); })
                .style('opacity', 0.8)
                .transition()
                .duration(1000)
                .attr("cy", function(d){return yScale(parseFloat(d));} );

我使用以下代码更新我的圈子并删除未使用的圈子（有时候就是这种情况）：

var circle = SVGbody
        .selectAll("circle")
        .data(graphDataY);

circle
                .style("fill", colorCircles())
                .transition().duration(1000)
                .attr("cx", function(d, i){ return xScale(graphDataX[i]);})
                .attr("cy",function(d){return yScale(parseFloat(d));});

circle.exit()
                        .style("opacity", 1)
                        .transition()
                        .duration(300)
                        .style("opacity", 0)
                        .remove();

最后，让我们假设我使用的最后一个数据长度为100，这意味着我目前有100个圆圈显示。如果我使用长度为120的新数据集，我使用我的更新代码移动现有的圆圈（exit（）。remove（）除外），然后我尝试使用以下内容“创建”剩余的圆圈剩下的未绑定数据（在这种情况下将剩下20个圆圈）：

                circle.enter().append("circle")
                    .attr("cx", function(d, i){ return xScale(graphDataX[i]);})
                    .attr("cy",function(d){return yScale(parseFloat(d));})
                    .style("opacity", 0)
                    .transition()
                    .duration(300)
                    .style("opacity", 1)

如何在D3.js中正确使用enter（）？

0 个答案: