Question

这是我工作的jsfiddle https://jsfiddle.net/dibyendu/wn6awvbe/。现在这个条形图适用于single value，我的要求是group bar chart。

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

其次，我尝试创建group并将个人group bars添加到group。这部分我无法破解。

这是我的代码，我试过了

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

但由于某种原因，它不起作用。我在这里做的错误是什么？感谢Advance的帮助。

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。

d3.js组条形图不起作用

1 个答案: