使用d3.js有一种方法来对齐两个Y轴的正值和负值 [英] Using d3.js is there a way to zero align two Y Axes with positive and negative values

问题描述

我是d3的新人，学习很多。我有一个问题，我找不到一个例子：
我有两个y轴正，负值与极不相同的域，一个是大美元金额，另一个是百分比。

I am new to d3, learning a lot. I have an issue I cannot find an example for: I have two y axes with positive and negative values with vastly different domains, one being large dollar amounts the other being percentages.

从一个例子看起来真的很棒的结果是一个细微的细节，每个y轴的零线在一个稍微不同的位置。有没有人知道d3中的一个方法让零线在同一个x位置？

The resulting graph from cobbling together examples looks really awesome with one slight detail, the zero line for each y axis is in a slightly different position. Does anyone know of a way in d3 to get the zero line to be at the same x position?

我想这两个yScales / axis共享同一个零线

I would like these two yScales/axes to share the same zero line

// 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的示例数据链接：

Here is a link to a jsfiddle with sample data:

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

（x轴刻度在jsfiddle示例中看起来很可怕）

(the x-axis ticks look horrible in the jsfiddle example)

推荐答案

p>一般来说，很遗憾没有办法做到这一点。 D3不是真的有几个事情排列的概念，因此没有办法完成它。

In general, there's unfortunately no way to do this neatly. D3 doesn't really have a concept of several things lining up and therefore no means of accomplishing it.

在你的特定情况下，你可以很容易地通过调整第二个y轴的域：

In your particular case however, you can fix it quite easily by tweaking the domain of the second y axis:

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

完成示例此处。

这篇关于使用d3.js有一种方法来对齐两个Y轴的正值和负值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！