Сводные значения SUM не работают при попытке использования в гистограмме

Question

Я импортировал данные из CSV-файла, сумел создать сумму столбца «Оценка» для каждого столбца «Измерение», а также получить различное количество атрибутов в столбце «Измерение» с помощью функции .map.:

d3.csv("TraitData.csv", function(d) {
  return {
    city: d.City,
    continent: d.Continent,
    country: d.Country,
    dimension: d.Dimension,
    identity: d.Identity,
    score: +d.Score,
    state: d.Subdivision,
    trait: d.Trait,
    index: d.Index,
    longitude: d.Latitude,
    latitude: d.Longitude
  }
}).then(function(data) {

  var varScore = d3.nest()
    .key(function(d) { return d.dimension; })
    .rollup(function(v) { return {
      totalscore: d3.sum(v, function(d) { return d.score; }),
        }; })
    .entries(data);
  var varDimensionGroup = d3.map(data, function(d) {return d.dimension;}).keys();
  var varDimension = varDimensionGroup.length;
  var svgWidth = 1250;
  var svgHeight = 300;
  var barPadding = 5;
    var barWidth = (svgWidth/varDimension);

  console.log(varScore);
  console.log(varDimensionGroup);
  console.log(varDimension);
  console.log(svgWidth);
  console.log(svgHeight);
  console.log(barPadding);
  console.log(barWidth);

var svg = d3.select("body").selectAll("#bar")
  .append("svg")
  .attr("width", svgWidth)
  .attr("height", svgHeight);

var barChart = svg.selectAll("rect")
    .data(varDimensionGroup)
    .enter()
    .append("rect")
    .attr("height", varScore)
    .attr("width", barWidth - barPadding)
    .attr("transform", function (d,i) {
         var translate = [barWidth * i, 0];
         return "translate("+ translate +")";
    });
});

Но я получаю сообщение об ошибке, касающееся высоты гистограммы: Обратите внимание, что в нем указано "5 ошибок", потому что мой полный набор данных CSVимеет 5 измерений.

Очевидно, способ, которым я вычисляю СУММУ каждого, или способ, которым я пытаюсь использовать / ссылаться на него, неверен, но я не уверен, почему.D3 довольно нов для меня.

Файл CSV содержит следующее:

City,Continent,Country,Dimension,Identity,Score,Subdivision,Trait,Index,Latitude,Longitude
Wilmington,North America,United States,Pride,1270858,45,Delaware,Ego,1,"39,7932","-75,6181"
Wilmington,North America,United States,Humility,1270858,23,Delaware,Selflessness,2,"39,7932","-75,6181"
Wilmington,North America,United States,Humility,1270858,23,Delaware,Generosity,3,"39,7932","-75,6181"
Wilmington,North America,United States,Anger,1270858,48,Delaware,Impatience,4,"39,7932","-75,6181"

Подводя итог, я хочу показать гистограмму, где количество баровосновывается на количестве отдельных «измерений», а высота каждого столбца основана на сумме «баллов» для каждого измерения.

Я использую D3.js v5.

Answer 1

используйте следующее:

var barChart = svg.selectAll("rect")
.data(varScore)
.enter()
.append("rect")
.attr("height", function(d){return d.value;} )
.attr("width", barWidth - barPadding)
.attr("transform", function (d,i) {
     var translate = [barWidth * i, 0];
     return "translate("+ translate +")";