d3.js：增量转换翻译

Question

我正在尝试使用 d3 过渡增量平移下面的方块。

首先我最初有6个方块。

然后，按下更新后，添加了两个方块，并且 'pushes' 左边的所有原始方块。

这是我卡住的部分。我想在再次按下更新后，将另外两个方块添加到数组中，并将方块序列向左推得更远，如下所示。

但是我当前的下面代码只适用于第 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>

Answer 1

以下是我在您的代码中发现的一些问题：

您仅在按下“#update1”按钮时添加链接 [7, 8]，因此需要更改为添加比最后一个按下的 'link' 高 +1 的数字，还有一个高出+2。
当您调用 'update' 函数时，您运行在一个更大的数组上，但仍然使用函数调用中的 'counter' 参数根据它们的索引定位它们以进行设置您正在创建的 'rect' 和 'text' 对象的 'x' 属性。

我想我已经添加了您想要的功能，这是一个代码笔：https://codepen.io/anon/pen/MBaoxb?editors=0011

我所做的修改如下：

Changed it so that the new links being added can increase based off the last number pushed into the array.

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

Removed the first 2 links from the array (so the position can be set from the index as the code in the 'update' function is currently set up to do).

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

d3.js：增量转换翻译

d3.js: incremental transition translation

transition

d3.js