javascript - 如何在 D3.js 中创建 CSV 条目的唯一列表？

Question

我有一个 CSV 文件，如下所示:

Category,Value
category1,162
category1,151
category2,124
category1,135
category2,315

我想创建一个专有的无序列表的类别(没有重复的类别)，所以该列表应如下所示:

<ul>
  <li>category1</li>
  <li>category2</li>
</ul>

数组很大，所以速度应该很快。 这是我到目前为止所拥有的(将 CSV 的某些部分显示为散点图):

  d3.csv("data.csv", function(error, data) {
    data.forEach(function(d) {
    d.Value = +d.Value;
  });

svg.selectAll(".dot")
  .data(data)
  .enter().append("circle")
  .attr("class", "dot")
  .attr("r", 1)
  .attr("cx", function(d) { return x(d.Value); })
  .attr("cy", 10);

除了 svg 之外，创建类别列表的最佳方式是什么？

Answer 1

您可以简单地使用类别构建另一个数组:

var categories = [];
data.forEach(function(d) {
  d.Category = Category;
  d.Value = +Value;
  if(categories.indexOf(d.Category) == -1) categories.push(d.Category);
});

// etc

d3.select("body").append("ul").selectAll("li")
  .data(categories)
  .enter().append("li")
  .html(function(d) { return d; });