D3 js范围条形图[关闭]答案

【问题标题】：D3 js ranged bar chart [closed]D3 js范围条形图[关闭]
【发布时间】：2015-12-04 09:45:57
【问题描述】：

我是 d3 js 的新手。我正在寻找像this 这样的图表，它是在highcharts 中完成的。在 highcharts 中，它被称为列范围图。有什么办法可以做到这一点。

当我在谷歌搜索时，我能得到的最好的东西是basic bar chart。谁能帮我把它变成一个范围图？

【问题讨论】：

【解决方案1】：

想象一下我有这样的数据集：

//these are the various categories 
    var categories = ['', 'Accessories', 'Audiophile', 'Camera & Photo', 'Cell Phones', 'Computers', 'eBook Readers', 'Gadgets', 'GPS & Navigation', 'Home Audio', 'Office Electronics', 'Portable Audio', 'Portable Video', 'Security & Surveillance', 'Service', 'Television & Video', 'Car & Vehicle'];
//these are the various categories cost
 var dollars = [[100,213], [75,209], [50,190], [100,179], [140,156], [138, 209], [90, 190], [65,179], [100, 213], [100, 209], [50, 190], [76,179], [45,156], [80,209], [75,190], [55,190]];

在数据集中Car&Vehicle 的成本范围为55$ to 190$。这里Television & Video 的成本范围为75$ to 190$，具体取决于质量。

让我们制作 x 比例。

var xscale = d3.scale.linear()
  .domain([10, 250])//minimum cast can be 10$ and maximum cost 250$
  .range([0, 722]);

让我们制作矩形条。

var chart = canvas.append('g')
      .attr("transform", "translate(150,0)")
      .attr('id', 'bars')
      .selectAll('rect')
      .data(dollars)
      .enter()
      .append('rect')
      .attr('height', 19)
      .attr({
        'x': function(d) {
          return xscale(d[0]);//this defines the start position of the bar
        },
        'y': function(d, i) {
          return yscale(i) + 19;
        }
      })
      .style('fill', function(d, i) {
        return colorScale(i);
      })
      .attr('width', function(d) {
        return 0;
      });

现在对于过渡栏的宽度将是：

var transit = d3.select("svg").selectAll("rect")
  .data(dollars)
  .transition()
  .duration(1000)
  .attr("width", function(d) {
    return xscale(d[1]) - xscale(d[0]);//width of the bar will be upper range - lower range.
  });

完整的工作代码here。

【讨论】：

结果看起来与我试图获得的结果几乎相同，但希望它带有一个分组栏。你能以这种方式更新你的例子吗？我的数据与您使用的数据有很大不同，我可以管理。
啊，但是你问的问题没有说明分组条形图..即使你放的 highchart 例子也是一个简单的范围条形图:)
我们能做到吗
你能指出你的代码的哪一部分将条形推到了图表的中间
plunk 中的第 120 行并更新了上面粘贴的代码中的注释。

【解决方案2】：

您指向基本条形图的链接无效。这看起来就像一个水平条形图，其中有很多例子。这是一个：http://bl.ocks.org/mbostock/2368837

【讨论】：