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

类似于

For( var i =0; i<dataset.length; i++){
   // Dataset[i].country
   // dataset[i].score
}

你有一个对象数组

Answer 2

您需要将 d 修正为 d.score。

如果要显示country文字，在svg.selectAll("rect")后写svg.selectAll("text")。

像这样：

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.score * 4);
    })
    .attr("width", w / dataset.length - barPadding)
    .attr("height", function(d) {
      return d.score * 4;
    });

  svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
      return d.country;
    })
    .attr("transform", function(d, i) {
      var barW = w / dataset.length;
      return "translate(" +
             ( barW * i + barW / 2 + barPadding ) + "," +
             ( h - 5 ) +
             ")rotate(-90)";
    })
    .attr("font-size", "8pt")
    .attr("fill", "white");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 3

在 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 正是名副其实的 "data-driven"！ :)

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

D3 - How to loop through an object with keys for a bar chart

javascript

object

d3.js

nested-loops