Сгруппированная столбчатая диаграмма, когда мои группы имеют разные размеры и пути вместо столбцов?

Question

Я пытаюсь составить столбчатую диаграмму с путями, а не столбцами из некоторых сгруппированных данных. Ниже приведена структура данных, которую я намерен использовать. Данные: сведения о товаре включают товары (название), упорядоченные по дате (год) и значение счетчика 1 или -1 в зависимости от того, были ли они добавлены или удалены со склада.

dyear, имя, значение y1, ААА, 1 у1, ВВВ, 1 у2, КТС, 1 у3, ддд, -1 у4, ЕЕЕ, -1 у5, FFF, -1 у5, ОГШ, 1 у5, HHH, 1 Y6, ККК, -1 Y7, МММ, -1 y8, NNN, 1 у9, ППС, 1 Y10, RRR, -1 Y10, ТТТ, -1 Y10, СНО, -1 Y11, УУУ, -1 y11, vvv, -1

Я создал столбчатую диаграмму и добавил пути в виде стрелок вверх или вниз на основе значения. Я после группировки продуктов по дате. У @GerardoFurtado и @Mark есть отличная демоверсия, но у меня возникают проблемы с ее разумным переводом для моих целей, как показано в этом вопросе.

Создание сгруппированной гистограммы, когда мои группы имеют разные размеры?

Я начал дразнить его в http://plnkr.co/edit/9VY54mlZbE3mvMKQWHqU?p=preview

но, будучи новичком в d3.js, мне понадобилось 3 недели, чтобы добраться до этого.

Можно ли добавить группу дат разного количества размеров товара?

Вся помощь очень ценится.

d3.js

d3.csv ("data.csv", тип, функция (ошибка, данные) { if (error) выдает ошибку;

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