Question

我正在尝试使用路径而不是某些分组数据中的条形图制作柱形图。下面是我打算使用的数据结构。数据：产品详细信息包括按日期（dyear）排列的产品（名称），计数值1或-1，具体取决于它们是从库存中添加还是从库存中删除。

dyear，名称，值 y1，AAA，1 y1，BBB，1 y2，CCC，1 y3，DDD，-1 y4，EEE，-1 y5，FFF，-1 y5，GGG，1 y5，HHH，1 y6，KKK，-1 y7，MMM，-1 y8，NNN，1 y9，PPP，1 y10，RRR，-1 y10，TTT，-1 y10，SSS，-1 y11，UUU，-1 y11，vvv，-1

我创建了一个柱形图，并根据该值将路径附加为向上或向下箭头。我按日期对产品进行分组之后。 @GerardoFurtado和@Mark的演示非常出色，但是我无法为此目的智能地对其进行翻译。

Making a grouped bar chart when my groups are varied sizes?

我开始在 http://plnkr.co/edit/9VY54mlZbE3mvMKQWHqU?p=preview

但是作为d3.js的新手，我花了3周的时间才能做到这一点。

是否可以添加不同数量的项目大小的日期组？

非常感谢所有帮助。

d3.js

d3.csv（“ data.csv”，类型，函数（错误，数据）{ 如果（错误）抛出错误；

  // Transform data (i.e., finding cumulative values and total) for easier charting
  var cumulative = 0;
  for (var i = 0; i < data.length; i++) {
    data[i].start = cumulative;
    cumulative += data[i].value;
    data[i].end = cumulative;

    data[i].class = (data[i].value >= 0) ? 'positive' : 'negative'
  }
  /* data.push({
     name: 'Total',
     end: cumulative,
     start: 0,
     class: 'total'
   })*/
  ;

  x0.domain(data.map(function(d) {
    return d.name;
  }));
  y.domain(d3.extent(data, function(d) {
    return d.end;
  })).nice();

  // add the x Axis

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .append("text")
    .attr("x", width / 2)
    .attr("y", margin.bottom - 5);


  // add the y Axis

  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);


  // append the rectangles for the bar chart

  var bar = svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("path")
    .attr("class", "bar")
    .style('fill', function(d, i) {
      return d.value < 0 ? colorLower : colorHigher;
    })
    .attr("d", function(d) {
      var pathData;

      var xStart = x0(d.name) + x0.bandwidth() / 2;
      var yStart = Math.abs(y(d.start));
      var yStart2 = Math.abs(y(d.end));
      var arrowSize = x0.bandwidth() / 2; {
        if (d.value > 0) {

          var yEnd = Math.abs(y(d.end)) + arrowSize;
          // Draw arrow pointing up if value is positive
          pathData = "M " + xStart + " " + yStart + " " +
            "L " + (xStart - arrowSize / 4) + " " + yStart + " " +
            "L " + (xStart - arrowSize / 4) + " " + (yEnd - arrowSize / 2) + " " +
            "L " + (xStart - arrowSize / 2) + " " + (yEnd - arrowSize / 2) + " " +
            "L " + xStart + " " + (yEnd - arrowSize) + " " +
            "L " + (xStart + arrowSize / 2) + " " + (yEnd - arrowSize / 2) + " " +
            "L " + (xStart + arrowSize / 4) + " " + (yEnd - arrowSize / 2) + " " +
            "L " + (xStart + arrowSize / 4) + " " + yStart + " z";
        }
        // Draw arrow pointing down if value is negative
        else if (d.value < 0) {

          var yEnd = Math.abs(y(d.end) - y(d.start));
          pathData = "M " + xStart + " " + yStart + " " +
            "L " + (xStart + arrowSize / 4) + " " + yStart + " " +
            "L " + (xStart + arrowSize / 4) + " " + (yStart + yEnd - arrowSize / 2) + " " +
            "L " + (xStart + arrowSize / 2) + " " + (yStart + yEnd - arrowSize / 2) + " " +
            "L " + xStart + " " + (yStart + yEnd) + " " +
            "L " + (xStart - arrowSize / 2) + " " + (yStart + yEnd - arrowSize / 2) + " " +
            "L " + (xStart - arrowSize / 4) + " " + (yStart + yEnd - arrowSize / 2) + " " +
            "L " + (xStart - arrowSize / 4) + " " + yStart + " z";

        }


      }
      return pathData;
    });

当我的组的大小和路径（而不是条形图）不同时，分组的柱状图？

0 个答案: