Question

我正在研究这个例子：https://bl.ocks.org/d3noob/2505b09d0feb51d0c9873cc486f10f67 由d3noob制作，我意识到第一个和最后一个点部分位于边缘。我想知道如何在x.domain的每一侧创建一个缓冲区，以保持点远离边距。

我认为负责这一行的内容如下：

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

我尝试用d3.min和d3.max来修改这一行但是这似乎不起作用，因为x轴正在处理日期。

Answer 1

您可以使用interval.offSet添加或减去时间（在本例中为天数）。

例如，从开始减去2天并在x域的末尾添加2天：

x.domain([d3.timeDay.offset(d3.min(data, function(d) {
    return d.date;
}), -2), d3.timeDay.offset(d3.max(data, function(d) {
    return d.date;
}), +2)]);

以下是更新的bl.ocks：https://bl.ocks.org/anonymous/f4bb84ba833b6f8ec9ddd3e8281abc44/79839a6a937d712edca8a7c8f00e4301723726c3

Answer 2

您可能需要考虑尝试d3fc extent component。在您的情况下，您可以在x标度的任一侧添加一天，如下所示：

var xExtent = fc.extentDate()
   // the property of the data that defines the x extent
  .accessors([function(d) { return d.date; }])
  // pad in domain units (in this case milliseconds)
  .padUnit('domain')
  // ensure that the scale is padded by one day in either direction
  .pad([millisPerDay, millisPerDay]);

x.domain(xExtent(data));

您还可以使用此组件来简化y域范围的计算：

var yExtent = fc.extentLinear()
  // the property of the data that defines the y extent
  .accessors([function(d) { return d.close; }])
  // pad by 10% in the +ve direction
  .pad([0, 0.1])
  // ensure that the extent includes zero
  .include([0]);

y.domain(yExtent(data));

以下是一个完整的示例：https://bl.ocks.org/ColinEberhardt/4b8737e0251f92075693a6e04df72638

如何修改处理d3.js中日期的域名？

2 个答案: