Javascript D3.js带负值的折线图

制作d3.js折线图。工作示例：

代码：

面临两个问题

尽管数据集中存在负值，但图表显示在0%刻度以上。我是d3新手，所以找不到问题，我建议是因为y.domain

是否可以根据y轴使用tickValue=[-50,0,50,100]渲染图表？尝试过了，但是svg容器中呈现了-50勾号

---

未在代码段中包含数据集，因为它太长。它包含在fiddle中。

如果您在正确的位置（图表边缘）绘制x轴，您会看到图形与x轴接触

var xAxisTranslate = svgHeight - 50;

如果将y域调整为（仅用于测试）

您可以看到，图形很好地位于0%线下方

在完整图形中，0%线下方的-3%不可见

---

如果您只是将图表的高度增加到

=500

，您将看到所需的结果。这可能是一个舍入问题。

1。太多的幻数值转换了图形的不同部分。看看这篇文章

上述约定的目标是，以这种方式设置后：

所有后续代码都可以忽略页边距

---

2.您可以使用数组硬编码

tickValues

，但是您还必须硬编码yDomain，使其在视图中像

y.domain（[-50100]）

（而不是使用

d3.extent

从数据值计算域）

---

const数据集=[{
“时刻”：“2018-03-14”，
“中国瓦卢”：0，
“瓦卢卢布”：651573.83
},
{
“时刻”：“2018-03-15”，
“中华人民共和国”：-0.18，
“瓦卢卢布”：650378.16
},
{
“时刻”：“2018-03-16”，
“中国瓦卢”：0.93，
“瓦卢卢布”：657633.22
},
{
“时刻”：“2018-03-19”，
“中华人民共和国”：-0.24，
“瓦卢卢布”：650012.09
},
{
“时刻”：“2018-03-20”，
“中华人民共和国”：-0.91，
“瓦卢卢布”：645619.39
},
{
“时刻”：“2018-03-21”，
“中华人民共和国”：-0.59，
“瓦卢卢布”：647702.98
},
{
“时刻”：“2018-03-22”，
“中华人民共和国”：-0.39，
“瓦卢卢布”：649028.2
},
{
“时刻”：“2018-03-23”，
“中华人民共和国”：-0.66，
“瓦卢卢布”：647251.33
},
{
“时刻”：“2018-03-26”，
“中华人民共和国”：-1，
“瓦卢卢布”：645037.53
},
{
“时刻”：“2018-03-27”，
“中华人民共和国”：-1.74，
“瓦卢卢布”：640242.97
},
{
“时刻”：“2018-03-28”，
“中华人民共和国”：-0.97，
“瓦卢卢布”：645237.98
},
{
“时刻”：“2018-03-29”，
“中国瓦卢”：-0.7，
“瓦卢卢布”：647028.82
},
{
“时刻”：“2018-03-30”，
“中华人民共和国”：-0.44，
“瓦卢卢布”：648697.05
},
{
“时刻”：“2018-04-02”，
“中华人民共和国”：-0.96，
“瓦卢卢布”：645328.79
},
{
“时刻”：“2018-04-03”，
“中华人民共和国”：-1.61，
“瓦卢卢布”：641075.02
},
{
“时刻”：“2018-04-04”，
“中华人民共和国”：-2.65，
“瓦卢卢布”：634322.06
},
{
“时刻”：“2018-04-05”，
“中华人民共和国”：-3.01，
“瓦卢卢布”：631949.94
},
{
“时刻”：“2018-04-06”，
“中华人民共和国”：-1.71，
“瓦卢卢布”：640405.6
},
{
“时刻”：“2018-04-09”，
“中国瓦卢”：21.22，
“瓦卢卢布”：789860.31
},
{
“时刻”：“2018-04-10”，
“中国瓦卢”：37.84，
“瓦卢卢布”：898161.44
},
{
“时刻”：“2018-04-11”，
“中国瓦卢”：45.28，
“瓦卢卢布”：946624.12
},
{
“时刻”：“2018-04-12”，
“中国瓦卢”：35.01，
“瓦卢卢布”：879713.53
},
{
“时刻”：“2018-04-13”，
“中国瓦卢”：35.2，
“瓦卢卢布”：880939.55
},
{
“时刻”：“2018-04-16”，
“中国瓦卢”：35.39，
“瓦卢卢布”：882187.37
},
{
“时刻”：“2018-04-17”，
“中国瓦卢”：32.97，
“瓦卢卢布”：866413.03
},
{
“时刻”：“2018-04-18”，
“中国瓦卢”：32.68，
“瓦卢卢布”：864526.16
},
{
“时刻”：“2018-04-19”，
“中国瓦卢”：32.62，
“瓦卢卢布”：864112.82
},
{
“时刻”：“2018-04-20”，
“中国瓦卢”：32.13，
“瓦卢卢布”：862427.04
},
{
“时刻”：“2018-04-23”，
“中国瓦卢”：32.34，
“瓦卢卢布”：863806.29
},
{
“时刻”：“2018-04-24”，
“中国瓦卢”：30.87，
“瓦卢卢布”：854187
},
{
“时刻”：“2018-04-25”，
“中国瓦卢”：31.72，
“瓦卢卢布”：859709.46
},
{
“时刻”：“2018-04-26”，
“中国瓦卢”：32.54，
“瓦卢卢布”：865102.62
},
{
“时刻”：“2018-04-27”，
“中国瓦卢”：31.89，
“瓦卢卢布”：860868.98
},
{
“时刻”：“2018-04-28”，
“中国瓦卢”：31.78，
“瓦卢卢布”：860107.7
},
{
“时刻”：“2018-04-30”，
“中国瓦卢”：30.45，
“瓦卢卢布”：851444.35
},
{
“时刻”：“2018-05-02”，
“中国瓦卢”：37.21，
“瓦卢卢布”：895592.11
},
{
“时刻”：“2018-05-03”，
“中国瓦卢”：33.04，
“瓦卢卢布”：868336.14
},
{
“时刻”：“2018-05-04”，
“中国瓦卢”：33.58，
“瓦卢卢布”：871888.06
},
{
“时刻”：“2018-05-07”，
“中国瓦卢”：33.31，
“瓦卢卢布”：870101.52
},
{
“时刻”：“2018-05-08”，
“中国瓦卢”：33.43，
“瓦卢卢布”：870868.5
},
{
“时刻”：“2018-05-10”，
“中国瓦卢”：33.86，
“瓦卢卢布”：873673.59
},
{
“时刻”：“2018-05-11”，
“中国瓦卢”：33.96，
“瓦卢卢布”：874332.19
},
{
“时刻”：“2018-05-14”，
“中国瓦卢”：33.66，
“瓦卢卢布”：872423.33
},
{
“时刻”：“2018-05-15”，
“中国瓦卢”：35.21，
“瓦卢卢布”：882485
},
{
“时刻”：“2018-05-16”，
“中国瓦卢”：34.82，
“瓦卢卢布”：879932.88
},
{
“时刻”：“2018-05-17”，
“中国瓦卢”：34.67，
“瓦卢卢布”：878996.99
},
{
“时刻”：“2018-05-18”，
“中国瓦卢”：34.44，
“瓦卢卢布”：877477.19
},
{
“时刻”：“2018-05-21”，
“中国瓦卢”：34.37，
“瓦卢卢布”：877036.83
},
{
“时刻”：“2018-05-22”，
“中国瓦卢”：34.89，
“瓦卢卢布”：880399.25
},
{
“时刻”：“2018-05-23”，
“中国瓦卢”：34.23，
“瓦卢卢布”：876134.51
},
{
“时刻”：“2018-05-24”，
“中国瓦卢”：33.73，
“瓦卢卢布”：872870.04
},
{
“时刻”：“2018-05-25”，
“中国瓦卢”：34.89，
“瓦卢卢布”：880450.96
},
{
“时刻”：“2018-05-28”，
“中国瓦卢”：35.34，
“瓦卢卢布”：883328
var xAxisTranslate = svgHeight - 50;

y.domain([-5, 5]);