d3.js：增量转换转换_D3.js_Transition

d3.js：增量转换转换

d3.js

d3.js：增量转换转换,d3.js,transition,D3.js,Transition,我正在尝试使用d3转换以增量方式转换下面的方块首先，我最初有6个正方形。然后，在按update之后，添加两个方块，并将所有原始方块“推”到左侧。这就是我被困的地方。我想，在再次按update之后，向数组中添加另外两个正方形，并将正方形序列进一步向左推，如下所示。但我下面的当前代码只在步骤1到2之间工作，而不适用于步骤3。有人能帮忙吗？谢谢 <head> <script src="https://d3js.org/d3.v3.min.js"></

我正在尝试使用d3转换以增量方式转换下面的方块

首先，我最初有6个正方形。

然后，在按update之后，添加两个方块，并将所有原始方块“推”到左侧。

这就是我被困的地方。我想，在再次按update之后，向数组中添加另外两个正方形，并将正方形序列进一步向左推，如下所示。

但我下面的当前代码只在步骤1到2之间工作，而不适用于步骤3。有人能帮忙吗？谢谢

<head>
    <script src="https://d3js.org/d3.v3.min.js"></script> 
</head>


<body style="background-color:black;">
    <button id="update1" class="btn  btn btn-sm">Update</button>
</body>

<script>
    var links = [1,2,3,4,5,6];


    svg = d3.select('body').append("svg")
            .attr("width", 600)
            .attr("height", 80);

    // function to add squares    
    var update = function(){
        rect = svg.append('g').selectAll('rect')
        text = svg.append('g').selectAll('text')


        links
        rect = rect.data(links)
        rect.enter().append("rect")
            .attr("x", function(e, counter){return 100  * (counter)})
            .attr("y", 20)
            .attr({"width":20, "height":20})
            .attr({"fill":'red', "opacity":"1"})


        text = text.data(links)
        text.enter().append('text')
            .attr("x", function(e, counter){return 100  * (counter) + 7})
            .attr("y", 18)
            .attr({"font-size":14, "fill":"white", "font-weight":"bold"})
            .text(function(e) {return e})
    };

    // initial squares
    update()

    // update with two squares
    d3.select("#update1").on("click", function() {
        var update1 = [7,8];

        // insert new data to array
        update1.forEach(function(i){
            links.push(i);
        })

        // remove existing squares in display
        d3.selectAll('svg>g').remove()

        // add new squares
        update()

        shift = update1.length // get no. of new squares
        var translate = "translate(" + -100 * shift + "," + "0" + ')'; // push it by existing no. of new squares
        d3.selectAll('rect,text').transition().attr('transform',translate).duration(1000)
    })

</script>

以下是我在代码中看到的一些问题：

当按下“update1”按钮时，您仅添加链接[7,8]，因此需要更改为添加一个比上次按下的“链接”高+1的数字，以及一个高+2的数字。当您调用“update”函数时，您正在一个较大的数组上运行，但仍然基于它们的索引定位它们，在函数调用中使用“counter”参数设置要创建的“rect”和“text”对象的“x”属性。我想我已经添加了您想要的功能，下面是一个代码笔：

我所做的更改如下：

对其进行了更改，以便添加的新链接可以根据最后推入阵列的数量增加

从数组中删除了前2个链接，因此可以从索引中设置位置，就像“更新”函数中的代码当前设置的那样

**Line 33:** var update1 = [links[links.length-1] + 1, links[links.length-1] + 2];

**Line 56:**     links = links.splice(2, links.length);