使用 d3.js 有一种方法可以将两个具有正值和负值的 Y 轴归零

Question

我是 d3 的新手，学到了很多东西。我有一个问题，找不到示例：我有两个 y 轴，其正值和负值具有截然不同的域，一个是大美元金额，另一个是百分比。

将示例拼凑在一起得到的图表看起来确实很棒，有一个细微的细节，每个 y 轴的零线位置略有不同。有谁知道 d3 中使零线位于相同 x 位置的方法吗？

我希望这两个 yScales/axes 共享相同的零线

// define yScale
var yScale = d3.scale.linear()
.range([height, 0])
.domain(d3.extent(dataset, function(d) { return d.value_di1; }))
;

// define y2 scale
var yScale2 = d3.scale.linear()
.range([height, 0])
.domain(d3.extent(dataset, function(d) { return d.calc_di1_di2_percent; }))
;

这是带有示例数据的 jsfiddle 的链接：

http://jsfiddle.net/jglover/XvBs3/1/

（在 jsfiddle 示例中，x 轴刻度看起来很糟糕）

Answer 1

一般来说，不幸的是没有办法巧妙地做到这一点。D3 实际上并没有多个事物排列的概念，因此无法实现它。

然而，在您的特定情况下，您可以通过调整第二个 y 轴的域来轻松修复它：

.domain([d3.min(dataset, function(d) { return d.calc_di1_di2_percent; }), 0.7])

完整的例子在这里。