d3.js - 如何生成在 (0, 0) 处不相交的轴？

Question

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

我该怎么做d3？

Answer 1

从 D3.js API 文档：

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

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