Dynamic 如何使用新数据更新d3.js条形图_Dynamic_Charts_D3.js

Dynamic 如何使用新数据更新d3.js条形图

dynamic charts d3.js

Dynamic 如何使用新数据更新d3.js条形图,dynamic,charts,d3.js,Dynamic,Charts,D3.js,我从这里的“让我们制作一个条形图I”示例开始：我很难弄明白如何用HTML5元素制作的简单条形图用新数据更新。这是我的密码： <!DOCTYPE html> <html> <head> <style> #work_queues_chart div { font-size: 0.5em; font-family: sans-serif; color: white;

我从这里的“让我们制作一个条形图I”示例开始：

我很难弄明白如何用HTML5元素制作的简单条形图用新数据更新。这是我的密码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #work_queues_chart div {
        font-size: 0.5em;
        font-family: sans-serif;

        color: white;
        background-color: steelblue;

        text-align: right;
        padding: 0.5em;
        margin: 0.2em;
      }
    </style>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8" />
    <script type="text/javascript">

      function init() {

        var data = [0, 0, 0, 0, 0, 0];

        /* scale is a function that normalizes a value in data into the range 0-98 */
        var scale = d3.scale.linear()
                      .domain([0, 200])
                      .range([0, 98]);

        var bars = d3.select("#work_queues_chart")
                     .selectAll("div")
                       .data(data)
                     .enter().append("div");

        bars.style("width", function(d) { return scale(d) + "%"; })
        bars.text(function(d) { return d; });

      }

      function update() {

        var data = [4, 8, 15, 16, 23, 42];

        /* http://stackoverflow.com/questions/14958825/dynamically-update-chart-data-in-d3 */
      }

      window.onload = init;

    </script>

  </head>
  <body>
    <div id="work_queues_chart" />
    <button onclick="update()">Update</button>
  </body>
</html>

问题是我应该在更新中加入什么，以使条形图与新数据一起绘制？我用新数据尝试了d3.selectwork\u queues\u chart.selectAlldiv.datadata，但我不清楚接下来需要做什么，也不清楚这是否是正确的做法。

我已经为您创建了一个提琴。这是一个简单的改变，特别是分离进入，更新和退出选择。这将帮助您开始理解D3中的更新过程

// enter selection
bars
    .enter().append("div");

// update selection
bars
    .style("width", function (d) {return scale(d) + "%";})
    .text(function (d) {return d;});

// exit selection
bars
    .exit().remove();

接受的答案在d3版本4发布之前得到了回答，但如果您使用d3v4，您必须以另一种方式进行更新，因为摘录自：

不再将输入的节点合并到更新中选择用于将输入和更新组合在一起数据连接

工作队列图表分区{ 字体大小：0.5em；字体系列：无衬线；颜色：白色；背景颜色：钢蓝色；文本对齐：右对齐；填充：0.5em；边缘：0.2米； } 使现代化

@WilfredoSánchezVega作为“让我们制作一个条形图”系列教程的补充，您需要查看Mike Bostock的教程以及教程，这些教程更详细地解释了上述代码。@AmeliaBR和/或FernOfTheAndes我很惊讶D3中没有更新功能。更新的间隔基本上是由一个调用方法的计时器调用的，简单的JS风格，对吗？还是我错过了窍门？@KonradViltersten D3是一个非常开放的库。它不会对你想做什么或什么时候做任何假设。如果您希望在不编写函数的情况下进行简单的更新，请考虑更高级的库，如DCJS或NVD3.UpDoupe！如果您使用的是画布而不是svg，您将如何做到这一点

// enter and update selection
bars
  .enter()
  .append("div")
  .merge(bars) // <== !!!
  .style("width", function (d) {return scale(d) + "%";})
  .text(function (d) {return d;});


// exit selection
bars
  .exit().remove();