Как создать гистограмму с накоплением в d3, когда каждый отдельный сегмент является объектом? - PullRequest
Новая
       10

Как создать гистограмму с накоплением в d3, когда каждый отдельный сегмент является объектом?

0 голосов
/ 26 июня 2018

Я пытаюсь создать диаграмму в d3, чтобы она выглядела так: https://ibb.co/j13i5T

Формат данных следующий и не может быть изменен: 

  var data = [
  {
  "year": "1991",
  "color":"purple",
  "value":12,
  },
  {
  "year":"1991",
  "color":"red",
  "value":8,
  },
  {
  "year": "1992",
  "color":"red",
  "value":20,
  },
  {
  "year": "1993",
  "color":"blue",
  "value":9,
  },
  {
  "year": "1993",
  "color":"red",
  "value":7,
  },
  {
  "year": "1993",
  "color":"purple",
  "value":3,
  },
]

Мне удалось разместить каждый объект в соответствующем году, но я изо всех сил стараюсь их сложить.

Это код, однако, хотя он отображается на моем компьютере локально, я не заставил его работать на скрипке: https://jsfiddle.net/joat1/kug91hm0/34/

Если в целом есть и лучший способ, я определенно открыт для совета.

1 Ответ

0 голосов
/ 26 июня 2018

Как я уже говорил выше, мое предпочтительное решение - использовать ChartJS для подобных проектов. Я пошел вперед и быстро попытался воссоздать примерную диаграмму с помощью (относительно) простого преобразования данных, чтобы отобразить входящие данные в формате, который ChartJS может прочитать.

Кодовая ручка для этого здесь https://codepen.io/jsanderlin/pen/dKqEod

Я хотел бы взглянуть на код, выполняющий сопоставление / предварительную обработку данных для ChartJS, ниже, поскольку это самый сложный фрагмент JavaScript, задействованный в этом процессе. Остальная часть JS / HTML просто извлечена из документации ChartJS и примера Stacked Chart здесь . 

data.forEach((val) => {
  // Add the label if it doesn't exist already
  if(!barChartData.labels.includes(val.year)) {
    barChartData.labels.push(val.year);
  }

  // Search for the correct dataset
  let valsDataset;
  let datasetName = `Dataset ${val.color}`;
  barChartData.datasets.forEach((dataset) => {
    if(dataset.label === datasetName) valsDataset = dataset;
  });

  // Add the dataset if it doesn't exist already
  if(valsDataset === undefined) {
    valsDataset = {
      label: datasetName,
      backgroundColor: val.color,
      data: []
    }
    barChartData.datasets.push(valsDataset);
  }

  // Find the correct index of the data array for this value, by looking up the year
  let valIndex = barChartData.labels.indexOf(val.year);
  // Set the correct data attribute according to val.value
  valsDataset.data[valIndex] = val.value;
});

Интересный проект для работы сегодня днем;)

...