javascript - 在 d3.js 中移动轴

Question

现在我的图表中有两个轴，分别位于图表的最左侧和底部。我想让轴与 (0,0) 坐标对齐，或者换句话说，我希望轴位于 x=0 和 y=0

这是我的轴代码:

    //setup x
var xAxis = d3.svg.axis()
    .scale(xRange)
    .tickSize(5)
    .tickSubdivide(true),

    //setup y
    yAxis = d3.svg.axis()
    .scale(yRange)
    .tickSize(5)
    .orient("left")
    .tickSubdivide(true);

我在想，这样做的方法可能只是在我现有的 svg 下制作一个较小的 svg，从零开始，然后将轴放在那里，然后将它们从我现在拥有的 svg 中删除。

完整代码如下:http://jsfiddle.net/v92q26L8/

Answer 1

代码的关键部分是附加轴的部分

vis.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);

vis.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);

目前，您使用包含轴的组(svg:g 节点)上的变换将轴定位在底部和左侧。

要重新定位轴，您只需使用定义的比例调整这些变换即可。

对于你的x轴

.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")

变成了

.attr("transform", "translate(0," + yRange(0) + ")")

y 轴

.attr("transform", "translate(" + (MARGINS.left) + ",0)")

变成

.attr("transform", "translate(" + xRange(0) + ",0)")

此外，更改体重秤的名称可能是明智的做法。术语“范围”在 D3 中具有非常特殊的含义，我建议使用 xScale 和 yScale。

JS Fiddle