Блог

Я пытаюсь воссоздать простой пример, как показано здесь:

https://www.d3-graph-gallery.com/graph/barplot_stacked_basicWide.html

Вот простая версия моего кода (обратите внимание, что данные имеют разные метки, но структурно идентичны):

   var data = [
{period:'t1', fmc1: 10, fmc2:9, fmc3:6, fmc4:5, fmc5:2},
{period:'t2', fmc1: 11, fmc2:8, fmc3:6, fmc4:4, fmc5:3},
{period:'t3', fmc1: 12, fmc2:10, fmc3:7, fmc4:5, fmc5:3},
  ];

  var groups = d3.map(data, function(d){return(d.period)}).keys()

  var subgroups = data.columns.slice(1);

  var stackedData = d3.stack()
   .keys(subgroups)
   (data);

  var yScale = d3.scaleLinear()
  .domain([0,80])
  .range([height,0]);

  var xScale = d3.scaleBand()
  .domain(groups)
  .range([0,width])
  .padding([.2]);

  var colorScale = d3.scaleOrdinal()
  .domain(subgroups)
  .range(["#003366","#366092","#4f81b9","#95b3d7","#b8cce4","#e7eef8","#a6a6a6","#d9d9d9","#ffffcc","#f6d18b","#e4a733","#b29866","#a6a6a6","#d9d9d9","#e7eef8","#b8cce4","#95b3d7","#4f81b9","#366092","#003366"]);

  graphGroup.append("g")
  .selectAll("g")
  .data(stackedData)
  .enter().append("g")
.attr("fill", function(d) { return colorScale(d.key); })
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
  .attr("x", function(d) { return xScale(d.data.period); })
  .attr("y", function(d) { return yScale(d[1]); })
  .attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); })
  .attr("width",xScale.bandwidth())  

 <script src="https://d3js.org/d3.v5.min.js"></script>  

Я столкнулся с ошибкой, которая гласит:

Ошибка типа: не удается прочитать свойство «фрагмент» неопределенной @ строки 47.

Эта строка:

   var subgroups = data.columns.slice(1);
  

Я подтвердил в консоли, что data.columns это действительно не определено. Возникает вопрос о том, что пытается сделать автор d3-graph-gallery. Я убежден, что объяснение есть, и визуальное изображение, похоже, отлично работает на веб-сайте. Первоначальное устранение неполадок с моей стороны не сильно помогло, похоже, это не проблема с версией.

Вопрос

Если data.columns.slice(1) это обычный подход к построению столбчатой диаграммы с накоплением (как можно было бы предположить из учебника), почему он не работает для меня? Я надеюсь, что есть быстрое исправление или что-то, что можно легко изменить, чтобы я мог следовать остальной части руководства, не слишком сильно расходясь с точки зрения синтаксиса и методологии.

data является массивом. Массивам JavaScript могут быть присвоены свойства, но на самом деле это не считается хорошей практикой, потому что вы «подсовываете» материал в объект.

В этом случае data.columns устанавливается программой чтения CSV, которую вы здесь не используете. Следующее эквивалентно значению data.columns :

 Object.keys(data[0])