javascript - d3.js 组条形图不起作用

Question

这是我的工作 jsfiddle https://jsfiddle.net/dibyendu/wn6awvbe/ 。现在这个条形图对于单值工作得很好，我的要求是使其成为组条形图。

因此，作为第一步，我必须根据所有值的 min 和 max 创建 x 轴范围。我能够成功地做到这一点。

其次，我尝试创建一个组并将单独的组栏添加到组中。这部分我无法破解。

这是我尝试过的代码

var combos = svg.selectAll("g").data(data)
    .enter()
    .append("g")
    .attr({width: 2 * width})
    .attr('height',y.rangeBand()+10)
    ;

combos.selectAll(".bar1")
  .append("rect")
  .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); })
  .attr("x", function(d) { return x(Math.min(0, d.value)); })
  .attr("y", function(d) { return y(d.name); })
  .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
  .attr("height", y.rangeBand());

combos.selectAll(".bar2")
  .append("rect")
  .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); })
  .attr("x", function(d) { return x(Math.min(0, d.value1)); })
  .attr("y", function(d) { return y(d.name); })
  .attr("width", function(d) { return Math.abs(x(d.value1) - x(0)); })
  .attr("height", y.rangeBand());  

但由于某种原因它不起作用。我在这里犯了什么错误。感谢您提前提供的帮助。

Answer 1

如果始终保证每组有 2 个条形，快速修复方法是:

combos
      .append("rect")
      .attr("class", function(d) { return "ba ba--" + (d.value < 0 ? "negative" : "positive"); })
      .attr("x", function(d) { return x(Math.min(0, d.value)); })
      .attr("y", function(d) { return y(d.name); })
      .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
      .attr("height", y.rangeBand() / 2); //<-- cut height in half

  combos
      .append("rect")
      .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); })
      .attr("x", function(d) { return x(Math.min(0, d.value1)); })
      .attr("y", function(d) { return y(d.name) + (y.rangeBand() / 2); }) //<-- offset if from other bar
      .attr("width", function(d) { return Math.abs(x(d.value1) - x(0)); })
      .attr("height", y.rangeBand() / 2); //<-- cut height in 2

<小时/>

已更新fiddle .

评论编辑

如果您想要动态数量的柱，您确实需要更改输入数据。 value1:、value2: 等是行不通的。快速重构可能会使用值数组:

{
  "name": "M1",
  "value": [-45, -13, -10, -8]
},
...

通过这种格式，您可以使用子选择并真正开始获取一些动态代码:

var combos = svg.selectAll("g").data(data)
  .enter()
  .append("g");    
combos
  .selectAll("rect")
  .data(function(d){
  return d.value.map(function(d1){
    return {
        value: d1,
        name: d.name,
        total: d.value.length,
      };
    })
  })
  .enter()
  .append("rect")
  .attr("class", function(d) { return "ba bar--" + (d.value < 0 ? "negative" : "positive"); })
  .attr("x", function(d) { return x(Math.min(0, d.value)); })
  .attr("y", function(d,i) { return (y(d.name) + (y.rangeBand() / d.total * i)) ; })
  .attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
  .attr("height", function(d){
    return y.rangeBand() / d.total
   });

<小时/>

新更新fiddle .