如何生成不与（0,0）相交的轴？

Question

我想生成不与（0,0）相交的轴（也不一定与图的边缘重合），如下例所示。

如何使用d3？

执行此操作

Answer 1

来自D3.js API documentation：

  

要更改轴相对于绘图的位置，请在包含g元素上指定transform属性。

Answer 2

首先需要确定要显示轴的位置。如果将它们固定在画布上，请选择宽度和高度的比率。

这是我做的一个例子：

http://vida.io/documents/zB4P4fjHz79um3qzX

x轴是高度的2/3：

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

y轴为宽度的1/3：

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

如果您需要相对于值范围的轴，请根据范围计算它们。例如：

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)")