Geek Answers Handbook

Using d3.js, there is a way to zero out two Y axes with positive and negative values

I am new to d3, learning a lot. I have a problem, I can’t find an example for: I have two y axes with positive and negative values ​​with very different areas, one of which is a big dollar, and the rest are percentages.

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

I would like these two yScales / axes to have 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; }))
;

Here is a link to jsfiddle with sample data:

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

(x-axis ticks look awful in jsfiddle example)

+4
1

, , . D3 , , , .

, , , y:

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

.

+3

More articles: