0

我开发了一个简单的 d3.js 折线图，允许用户在 json 中的变量之间切换：

http://plnkr.co/edit/8r0DBxVFgY6SJKbukWh5?p=preview

但是，我需要它是条形图而不是折线图，并且我无法弄清楚如何转换条形图，或者其他任何使用 selectAll 来绘制的东西，例如点。在这种情况下，我一直在 d3.json 函数中绘制条形，如下所示：

svg.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return x(d.watershed); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.variable); })
  .attr("height", function(d) { return height - y(d.variable); });

问题是：我应该在 updateData 函数中放置什么来转换条形以反映新数据？我觉得我需要设置一个变量来从 d3.json 和 updateData 函数（与 var valueLine 一样）调用 svg.selectAll('.bar")，但我找不到看起来如何的示例在这种情况下。

4

1 回答 1

2

我在这里修改了你的代码来做你想做的事。除了您在 JSON 处理程序中提到的代码之外，您还需要更新函数中的以下内容：

svg.selectAll(".bar")
   .data(data)
   .transition().duration(750)
   .attr("x", function(d) { return x(d.watershed); })
   .attr("y", function(d) { return y(d.variable); })
   .attr("height", function(d) { return height - y(d.variable); });

这会使用过渡更新条形图。

我还修改了您提供给比例尺的条形之间的间隔值——它太大了，条形本身的宽度为 0。

于 2013-05-10T15:52:40.670 回答