javascript - 在d3.js中移动轴

我的图形中现在有两个轴，它们卡在图形的最左侧和最底部。我想使轴与（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，从零开始，然后将轴放在那里，然后从我现在拥有的那一个中删除它们。

这是完整的代码：http://jsfiddle.net/v92q26L8/

最佳答案

代码的关键部分是连接轴的位置

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

关于javascript - 在d3.js中移动轴，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32205507/