javascript - D3 - 如何使用条形图的键循环对象

Question

我正在尝试使用以下数据集创建条形图。我被困在确定 bar[country] 的 height[score] 的部分。我如何循环遍历数据集以提取不同国家/地区的每个分数？

任何帮助将不胜感激:)

var w = 500;
var h = 100;
var barPadding = 1;

var dataset = [
  {"country":"Hong Kong","score":8.98},
  {"country":"Singapore","score":8.54},
  {"country":"New Zealand","score":8.19},
  {"country":"Switzerland","score":8.09},
  {"country":"Mauritius","score":8.98},
  {"country":"United Arab Emirates","score":8.05},
  {"country":"Canada","score":8.00},
  {"country":"Australia","score":7.87},
  {"country":"Jordan","score":7.86},
  {"country":"Chile","score":7.84},
  ];

  //Create SVG element
  var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

  svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      return i * (w / dataset.length);
    })
    .attr("y", function(d) {
      return h - (d * 4);
    })
    .attr("width", w / dataset.length - barPadding)
    .attr("height", function(d) {
      return d * 4;
    });

Answer 1

在 D3 中，通过 .data(dataset) 命令加载数据后，您现在可以通过插入匿名函数 function(d, i) 来访问数据的每条记录{ } 正如您在一些属性中所做的那样。

由于您的数据集是:

var dataset = [
  {"country":"Hong Kong","score":8.98},
  {"country":"Singapore","score":8.54},
  {"country":"New Zealand","score":8.19},
  {"country":"Switzerland","score":8.09},
  {"country":"Mauritius","score":8.98},
  {"country":"United Arab Emirates","score":8.05},
  {"country":"Canada","score":8.00},
  {"country":"Australia","score":7.87},
  {"country":"Jordan","score":7.86},
  {"country":"Chile","score":7.84},
  ];

每个 d 是一个对象记录，例如{"country":"Singapore","score":8.54}，而 i 指的是对象 d 返回的索引，例如1 用于我们上面使用的 d 示例。

要访问对象记录 d 的 score，这变成了简单的 Javscript 对象表示法，即 d.score。

因此您的 .attr 调用应该如下所示:

.attr("height", function(d) {
          return d.score * 4;
        });

同样，您可以提取其他字段，例如country 和 d.country 如果你打算在 .attr("text", function(d) { return d.country; });

这就是 D3 的真正魅力和力量。如果您想使用通过数据获得的更多功能来扩展您的可视化，那么您只需确保您的 dataset 数据包含更多数据属性，您可以稍后调用它们遍历匿名函数。而 D3 顾名思义，是真正的“数据驱动”! :)