Question

我的图表中现在有两个轴，它们位于图表的左下角。我想让轴与（0,0）坐标对齐，换句话说我希望轴在x = 0和y = 0

这是我的轴代码：

/Pages/*[name()=preceding-sibling::Home/menu/item]/menu

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

以下是完整代码：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

在d3.js中移动轴

1 个答案: