Csv 尝试在条形图中使用时，汇总和值无效

我已经从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"

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 +")";

总而言之，我想展示的是一个条形图，其中条形图的数量基于不同“维度”的数量，每个条形图的高度基于每个维度的“分数”之和

我使用的是D3.js v5。

使用以下命令：

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"

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 +")";

---

如果你的div有id

bar

，正如你所说的，那么你是在向div追加rect，你需要使用：

var svg=d3.select（“#bar”）.append（“svg”）.attr（…

嗨，安德鲁，我现在确实看到了。问题是我现在遇到了这个错误：“属性高度：预期长度，[对象]，…”显然，我的varScore变量没有按我想要的方式工作；我不知道如何修复它