Javascript D3.js-如何调用条形图中字符串的嵌套值

我想用D3.js绘制一个包含以下值的csv条形图：

**name**
apple
apple
apple
banana

我将我的数据嵌套为：

var fruits = d3.nest()
  .key(function(d) { return d.name; })
  .rollup(function(v) { return v.length })
  .entries(data);

使用console.log（fruits），我可以看到以下结构：

(2) [Object, Object]
    0:Object
      key:"apple"
      values:3

这就是我想要的：每个水果名称包含多少行？但是，当我尝试构建条形图时，我遇到了一个错误：

Error: <rect> attribute width: Expected length, "NaN".

也不是

---

如何访问嵌套值以创建条形图？

您的两个代码段都可以工作。您可能在其他地方有其他问题，我们需要查看更多代码。请复制/粘贴您的刻度和输入选项。@GerardoFurtado我已经添加了更多代码！谢谢，这就是你的密码吗？高度在哪里？@GerardoFurtado.attr（“height”，heightScale.rangeBand（））我刚刚删除了我的答案，它使用了v4。。。我看不出你使用的是v3，在我写下答案后，发布了用

rangeBand（）

编辑的提示。。。我现在没时间把它改成v3，希望有人能帮你。

var svg = d3.select("#barChart")
        .attr("viewBox", [
           0,
           0,
           width2,
           height2
         ].join(" "));

var g = svg.append("g");

widthScale.domain([ 0, d3.max(data, function(d) {
    return d.values;
  }) ]);

heightScale.domain(data.map(function(d) { return d.values; } ));  

var rects = svg.selectAll("rect")
        .data(fruits)
        .enter()
        .append("rect");

  rects.attr("x", padding[3])
    .attr("y", function(d) {
      return heightScale(d.key);
    })
    .attr("width", function(d,i) {   
      return widthScale(+d.values);
    })
    .attr("height", heightScale.rangeBand())

.attr("width", function(d,i) { 
  return widthScale(+fruits[i].values);
})
.attr("height", heightScale.rangeBand())