Question

我正在尝试使用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>

Answer 1

以下是您的代码中可能会出现的一些问题：

您仅在按下“＃update1”按钮时添加链接[7，8]，因此需要更改为添加一个比上次推送的“链接”高+1的数字，以及高出+2。
当您调用“更新”函数时，您正在一个较大的数组上运行，但仍在函数调用中根据它们的索引和“计数器”参数基于它们的位置来定位它们，以设置“矩形”的“ x”属性和您要创建的“文本”对象。

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

我所做的更改如下：

对其进行了更改，以便可以根据推送到数组中的最后一个数字来增加要添加的新链接。

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

从数组中删除了前2个链接（因此，由于当前已设置“更新”功能中的代码，因此可以从索引中设置位置。）

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

d3.js：增量过渡翻译

1 个答案: