为 D3 v4 中的简单 CSV 获得折线图的正确比例

Question

我有以下CSV file，很简单。

我想用该数据绘制折线图。我发现使用新版本的 D3 很难做到这一点。

我已经尝试了各种方法，但这是我目前拥有的。

var x = d3.scaleBand().range([0, width]);

然后在 d3.csv() 通话中我有

x.domain(data, function(d) { return d.date; });

不行，我也试过了：

var x = d3.scaleOrdinal().range([0, width]);

但这也没有用。我发现使用线性定量尺度更容易。

更新

根据 Gerardo 的更正（顺便说一句，这是个好地方），我现在明白了：

Answer 1

在比例中，domain 必须是一个数组。所以，这个：

x.domain(data, function(d) { return d.date; });

应该是：

x.domain(data.map(function(d) { return d.date; }));

您可以在这些演示中看到不同之处。首先，您的代码：

var data = [{date: "Q1 2014", close: 58},
           {date: "Q2 2014", close: 48},
           {date: "Q3 2014", close: 67},
           {date: "Q4 2014", close: 33},
           {date: "Q1 2014", close: 27},
           {date: "Q2 2014", close: 87},
           {date: "Q3 2014", close: 23},
           {date: "Q4 2014", close: 56}];

var scale = d3.scaleOrdinal().domain(data, function(d){
  return d.date;
});
                                     
console.log(scale.domain());

<script src="https://d3js.org/d3.v4.min.js"></script>

现在，使用map：

var data = [{date: "Q1 2014", close: 58},
           {date: "Q2 2014", close: 48},
           {date: "Q3 2014", close: 67},
           {date: "Q4 2014", close: 33},
           {date: "Q1 2014", close: 27},
           {date: "Q2 2014", close: 87},
           {date: "Q3 2014", close: 23},
           {date: "Q4 2014", close: 56}];

var scale = d3.scaleOrdinal().domain(data.map(function(d){
  return d.date;
}));
                                     
console.log(scale.domain());

<script src="https://d3js.org/d3.v4.min.js"></script>

编辑：由于您正在制作折线图，因此您应该使用时间刻度或其他刻度，而不是序数刻度。原因是序数比例期望range 中的值数量与domain 中的值数量相同。话虽如此，您可以使用scalePoint：

var x = d3.scalePoint().range([0, width])
    .domain(data.map(function(d) { return d.date; }));