Question

我正在使用webapp来呈现波浪动画。数字数据是由另一个应用程序生成的 - webapp将采用数组（可能是json，但它现在不那么重要）作为输入。每个阵列都会在确切的时间步长中将波浪的高度保持在每个位置。

总结 - n个数组，每个数组都保持波高，我需要描绘它。

我目前的想法是使用d3.js来处理这个问题。到目前为止我创建了这样的脚本 var dataset1 = [5,10,13,19,21,25,22,18,15,13， 11,12,15,20,18,17,16,18,23,25];

    var dataset2 = [ 3, 7, 10, 16, 18, 22, 19, 15, 12, 10,
                    11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
    var datasetTry = [ 3, 7 ];

    var dataset3 = [ 1, 2, 3, 4, 5];
    var dataset4 = [ 2, 3, 4, 5, 6];

    var storage = [ dataset1, dataset2, dataset3, dataset4 ]


    //Width and height
    var w = 1500;
    var h = 400;
    var barPadding = 1;

    //Create SVG element
    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    function updateData(dataset) {
        console.log("updateData");
        console.log(dataset);
    svg.selectAll("circle")
          .data(dataset)
          .enter()
          .append("circle")
          .attr("cx", function(d, i) {
              return 4 + i * ((w - 4) / dataset.length);
          })
          .attr("cy", function(d) {
                         return h - (d * 4);  //Height minus data value
                     })
          .attr("r", 3);

        d3.selectAll("circle")
          .data([])
          .exit()
          .transition()
          .delay(2500)
          .remove();
    } 

    var i = 0;    

    function myLoop () { 
       setTimeout(function () { 
          updateData(storage[i]);
          i++;                 
          if (i < 5) {        
             console.log("i = " + i);
             myLoop();        
          }                  
       }, 3000)
    }

    myLoop();

它的工作原理......一点点。数据显然只是随机数，但它并不重要。目前延迟问题 - 如果我设置移除数据的延迟并将新数据输入相同（或接近）的值，它确实无效 - 只描绘了第一个数据。

我也强烈地感到它与应该完成的方式相差甚远。

如何正确地做到这一点？

Answer 1

只需将内容置于闭包结构中，调用就可以使代码更易于管理。这是一些链接..

我怀疑你的计时问题可能来自于对同一元素使用d3.selectAll和svg.selectAll。

阅读this by Bostock，this recent article，this tutorial和this tutorial。

想要创建一个更像这样的结构：

var circles = svg.selectAll("circle").data(data, dateFn)

circles.transition()
     .attr("cx", function(d) { return x(dateFn(d)) })
     .attr("cy", function(d) { return y(amountFn(d)) })

    circles.enter()
     .append("svg:circle")
     .attr("r", 4)
     .attr("cx", function(d) { return x(dateFn(d)) })
     .attr("cy", function(d) { return y(amountFn(d)) })
     .on("click", function(d) {
        d3.select("#demoAddRandomAndDelete .value").text("Date: " + d.created_at + " amount: " + d.amount)
     })

    circles.exit()
     .remove()

d3.js简单动画 - 已生成的数据集

1 个答案: