通过按下按钮将D3刻度从线性更改为pow

Question

我尝试通过按下按钮动态地从线性比例切换到比例尺。我的设置如下：

<button id="scaling">Switch from linear to quadratic scale</button>

使用以下代码段：

var xScale = d3.scale.linear()
    .domain([0, 10])
    .range([50, 350]);

var xAxis = d3.svg.axis()
    .orient('bottom')
    .scale(xScale);

和按钮的事件处理程序：

d3.select("#scaling").on("click", function() {
    xScale = d3.scale.pow().exponent(2); // <-- this doesn't work!
    vis.select('.xaxis').transition().call(xAxis);
});

请参阅http://jsfiddle.net/stefanooo/90zc22fm/了解演示。

如何实现更改后的缩放？

Answer 1

您需要将新比例分配给轴。您还应该为新比例设置域/范围：

xScale = d3.scale.pow().exponent(2)
    .domain([0, 10])
    .range([50, 350]);
vis.select('.xaxis').transition().call(xAxis.scale(xScale));

完整演示here。