Question

有没有办法让NVD3 / D3对用于第一个数据集的后续数据集使用相同的X值？看一下下面的例子。

var testdata = [
  {
    "key" : "Quantity" ,
    "bar": true,
    "values" : [ [ 1136005200000 , 1271000.0] , [ 1138683600000 , 1271000.0] , [ 1141102800000 , 1271000.0] , ....
  },
  {
    "key" : "Price" ,
    "values" : [ [ 1136005200000 , 71.89] ,     [ 1138683600000 , 75.51] ,     [ 1141102800000 , 68.49] , [....
  }

注意每次在第二个数据集中重复第一个坐标（我称之为x值）。如果它为每个数据集使用相同的X值，为什么不重用它呢？这似乎是一种浪费。特别是对于大量数据和许多数据集/组。或许也有一些我看不到或不理解的东西。任何帮助将不胜感激。

取自的示例数据摘录 https://github.com/novus/nvd3/blob/master/examples/linePlusBarChart.html

Answer 1

一般来说，你的问题的答案是否定的。 D3的主要假设之一是数据定义了显示的内容。也就是说，数据是独立的。如果要引用其他数据位，则会违反此假设。

那就是说，你可以有这样的数据结构：

var testdata = {
  "time" : [ 1136005200000, 1138683600000, ... ],
  "values" : [{
    "key": "Quantity",
    "values": [ 1271000.0, 1271000.0, ... ]
  }, {
  ...
  }]
};

然后你就可以定义例如像这样的线生成器。

var line = d3.svg.line()
             .x(function(d,i) { return xScale(testdata.time[i]); })
             .y(function(d) { return yScale(d); });

你会像这样使用它。

d3.selectAll("path").data(testdata.values)
  .enter().append("path")
  .attr("d", function(d) { return line(d.values); });

这样可以省去x值的重复定义。缺点是您需要明确地索引到testdata.time，这会使代码难以维护并且不易理解。

NVD3在多个组图表中重用值

1 个答案: