CODEWITHSUNDEEP
d3.js
kjo
kjo

Reputation: 35321

How to produce axes that do not intersect at (0, 0)?

I would like to generate axes that do not intersect at (0, 0) (and also do not necessarily coincide with the edges of a plot), as shown in the example below.

How can I do this with d3?

enter image description here

Upvotes: 0

Views: 221

Answers (2)

Phuoc Do
Phuoc Do

Reputation: 1344

You will first need to figure out where you want to display the axis. If they are fixed to canvas, take ratios of width and height.

Here's an example that I made:

http://vida.io/documents/zB4P4fjHz79um3qzX

x-axis is at to 2/3 of height:

.attr("transform", "translate(0," + height * 2 / 3 + ")")

And y-axis is at 1/3 of width:

.attr("transform", "translate(" + width / 3 + ", 0)")

If you need the axis relative to range of values, calculate them based on range. For example:

var domain = d3.extent(data, function(d) { return d.y_axis; })
var y_axis_pos = width * (y_axis_value - domain[1]) / (domain[0] - domain[1]);
// svg code...
    .attr("transform", "translate(" + y_axis_pos + ", 0)")

Upvotes: 1

Stephen Thomas
Stephen Thomas

Reputation: 14053

From the D3.js API documentation:

to change the position of the axis with respect to the plot, specify a transform attribute on the containing g element.

Upvotes: 1

Related Questions