Question

如何根据http://bl.ocks.org/mbostock/3884955调整以下代码来选择特定列？

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });

d3.tsv("data.tsv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });

  var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, temperature: +d[name]};
      })
    };  

  });

在上面的示例中使用的数据中，有3列：3个城市的温度的日期和3列。在我的用例中，我有10列：3个城市的每个城市的日期和3个变量，即（1 + [3 * 3]）。我想加载整个数据集（用于工具提示），但只想绘制每个城市的一个变量，它位于列索引＃1,4和7中。我该怎么做？（参见下面的粗略语法）。

var cities = color.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {date: d.date, maxTemperature: *+d[arrays in column index 1, 4 and 7]*};
    })
    values2: data.map(function(d) {
      return {date: d.date, minTemperature: *+d[arrays in column index 2, 5 and 8]*};
    })
    values3: data.map(function(d) {
      return {date: d.date, avgTemperature: *+d[arrays in column index 3, 8 and 9]*};
    })
  };
});

Answer 1

您不需要对现有代码进行任何更改。设置cities的方式只需要您为所需的数据指定一个有意义的名称，然后再引用它。所以你会有像

这样的东西

var cities = color.domain().map(function(name) {
return {
  name: name,
  values: data.map(function(d) {
    return {date: d.date, first: +d[name + " first"], second: +d[name + " second"]};
  })
};

d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.first; }); });

请注意，实际名称当然取决于数据中的内容。

Answer 2

我能够通过添加过滤器关键条件来解决它，以排除我不想图表的其他数据类别。在我上面使用的示例中，我每个城市都有最小值，最大值和平均温度，并且只想获取平均温度。我添加了不包括列标题的过滤器，其中包含“max”或“min”等字符串。

color.domain(d3.keys(data[0]).filter(function(key) 
    { return key !== "date" && key.indexOf("max") == -1 && 
    key.indexOf("min") == -1; });

我不一定知道完整的列名是什么，但在我的用例中，不同的变量总是用max，min或avg标记，这使得这对我来说是一个可行的解决方案，但可能不适合完全没有人未知的列标题。我最初想根据索引＃选择列，但这很好用。

Answer 3

这在选择列方面对我有用：

d3.csv("data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) {
    return key == "avg" || key == "additional_columns"; 
  });
});

根据列选择d3数据子集

3 个答案: