Question

我开发了一个简单的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函数中调用svg.selectAll（'。bar“）（和var valueLine一样），但我找不到这样看的例子在这种情况下。

Answer 1

我已修改您的代码here以执行您想要的操作。除了您在JSON处理程序中提到的代码之外，您还需要在update函数中使用以下代码：

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。

使用d3.js中的combobox变量切换过渡条形图

1 个答案: