5

如何调整来自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]};
      })
    };  

  });

在上面示例中使用的数据中，有 4 列：日期和 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]*};
    })
  };
});
4

3 回答 3

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; }); });

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

于 2013-10-01T13:39:38.990 回答
1

我能够通过添加过滤器关键条件来排除我不想绘制图表的其他数据类别来解决它。在我上面使用的示例中，我有每个城市的最低、最高和平均温度，并且只想获取平均温度。我添加了过滤器，不包括包含“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 标记，这对我来说是一个可行的解决方案，但可能不适用于列标题完全未知的人. 我最初想根据索引 # 选择列，但这很好用。

于 2013-10-02T03:41:29.137 回答
1

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

d3.csv("data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) {
    return key == "avg" || key == "additional_columns"; 
  });
});
于 2014-03-22T07:11:46.520 回答