Диаграмма с различным количеством серий в группе - PullRequest
Новая
       22

Диаграмма с различным количеством серий в группе

0 голосов
/ 20 июня 2019

Мне нужно добавить группу полей даты на график. Группы имеют разные размеры. Я следовал нескольким примерам, но не смог получить поле даты на графике.

Я создал диаграмму, показывающую путь, как показано, но мне нужно иметь возможность вкладывать различные серии в группы разных размеров

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

Перейдите по ссылке ниже, чтобы просмотреть планку.

http://plnkr.co/edit/9VY54mlZbE3mvMKQWHqU?p=preview

...