当您通过selection.data将数据连接到选择时，数据数组中的元素数应与选择中的元素数相匹配。您的数据数组有两个元素（对于 Jim 和 Ray），但是您将其绑定到的选择只有一个 SVG 元素。您是要创建多个 SVG 元素，还是将 Jim 和 Ray 的得分矩形放在同一个 SVG 元素中？

如果要将两个数据元素绑定到单个 SVG 元素，可以将数据包装在另一个数组中：

var chart = d3.select("#charts").append("svg")
    .data([data])
    .attr("class", "chart")
    …

或者，使用selection.datum，它直接绑定数据而不计算连接：

var chart = d3.select("#charts").append("svg")
    .datum(data)
    .attr("class", "chart")
    …

如果你想为每个人创建多个 SVG 元素，那么你需要一个数据连接：

var chart = d3.select("#charts").selectAll("svg")
    .data(data)
  .enter().append("svg")
    .attr("class", "chart")
    …

第二个问题是你不应该将d3.values与数组一起使用；该函数用于提取对象的值。假设您想要每个人一个 SVG 元素（因此，在本例中为两个），那么 rect 的数据就是该人的相关分数：

var rect = chart.selectAll("rect")
    .data(function(d) { return d.scores; })
  .enter().append("rect")
    …

如果您还没有，我建议您阅读以下教程：

• 用联接思考
• 嵌套选择

除了 mbostock 的好答案之外，这可能会澄清嵌套方面。

您的数据有 2 度嵌套。您有一个包含 2 个对象的数组，每个对象都有一个整数数组。如果您希望最终图像反映这些差异，则需要对每个图像进行连接。

这是一个解决方案：每个用户由一个组g元素表示，每个分数由一个rect. 您可以通过以下几种方式执行此操作：datum在 svg 上使用，然后在 each 上使用标识函数g，或者您可以直接在g. 使用dataong是更典型的，但这里有两种方式：

在 svg 上使用数据：

var chart = d3.select('body').append('svg')
  .datum(data)             // <---- datum
  .attr('width',800)
  .attr('height',350)
  .selectAll('g')
  .data(function(d){ return d; })  // <----- identity function
  .enter().append('g')
    .attr('class', function(d) { return d.user; })
    .attr('transform', function(d, i) { return 'translate(0, ' + i * 140 + ')'; })
    .selectAll('rect')
    .data(function(d) { return d.scores; })
    .enter().append('rect')
      .attr('y', function(d, i) { return i * 20; })
      .attr('width', function(d) { return d; })
      .attr('height', 20);

使用组 ( g) 元素上的数据：

var chart = d3.select('body').append('svg')
  .attr('width',800)
  .attr('height',350)
  .selectAll('g')
  .data(data)          // <--- attach directly to the g
  .enter().append('g')
    .attr('class', function(d) { return d.user; })
    .attr('transform', function(d, i) { return 'translate(0, ' + i * 140 + ')'; })
    .selectAll('rect')
    .data(function(d) { return d.scores; })
    .enter().append('rect')
      .attr('y', function(d, i) { return i * 20; })
      .attr('width', function(d) { return d; })
      .attr('height', 20);

同样，您不必创建这些 g 元素，但通过这样做，我现在可以以不同的方式表示用户分数（它们具有与变换不同的 y），并且我还可以为它们提供不同的样式，如下所示：

.jim {
  fill: red;
}
.ray {
  fill: blue;
}