在d3.js中使用组合框变量切换的转换条形图 [英] Transitioning bar chart with combobox variable toggle in d3.js

问题描述

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

I've developed a simple d3.js line graph that allows the user to toggle between variables in a json:

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

但是，我需要这是一个条形图，而不是线图，我不知道如何转换条，或任何其他使用selectAll来绘制，例如点。在这种情况下，我一直在d3.json函数中绘制条形：

However, I need this to be a bar graph instead of a line graph and I can't figure out how to transition bars, or anything else that uses a selectAll to draw, for that matter, such as points. In this case, I've been drawing the bars in the d3.json function like so:

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一样），但是我找不到这样的例子

The problem is: what do I put in the updateData function to transition the bars to reflect the new data? I feel like I need to set up a variable to call the svg.selectAll('.bar") from both the d3.json and updateData functions (as with var valueLine), but I couldn't find examples of how that would look in this context.

推荐答案

我已修改您的代码这里做你想要的除了你在JSON处理程序中提到的代码，你需要以下更新函数：

I've modified your code here to do what you want. Apart from the code you mention in the JSON handler, you need the following in the update function:

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); });

这会更新带有转换的栏。

This updates the bars with a transition.

我还修改了您给标尺的栏之间的间隔值 - - 它是那么大，酒吧本身有0的宽度。

I've also modified the value for the interval between bars that you gave to the scale -- it was so large that the bars themselves had 0 width.

这篇关于在d3.js中使用组合框变量切换的转换条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！