Question

我正在使用Scatter图来显示数据http://bl.ocks.org/mbostock/3887118。我在页面上有两个以上的图表。我想保留用户可以选择的两个选项 1.标准化按钮：x轴的值将被标准化，并绘制新的图形。 2. log y按钮：y轴的值更改为log y，新图形相应地构建在同一页面上。

如何做到这一点d3.js？

此外，我正在使用Nodejs，Express和d3.js绘制它。

直到现在我已经建立了图表。这些是增加交互性的选项。

Answer 1

我认为最好的是定义两个不同的尺度：

var yNormal = d3.scale.linear() ...

和

var yLog = d3.scale.log() ....

并点击按钮，使用其他比例重绘圆圈：

//in button event handler
if( /* log */) {
   svg.selectAll(".dot").attr('cy', function() { return yLog(d.yourDataField); }
}
else {
   svg.selectAll(".dot").attr('cy', function() { return yNorm(d.yourDataField); }
}

您还可以使用转换来为重绘设置动画，如下所示：

svg.selectAll(".dot").transition().duration(500).attr('cy', function() { return yLog(d.yourDataField); }

您还可以使用this方法为轴重新缩放设置动画。

您也可以将它应用于X轴。

在d3.js中标准化x值和记录y值

1 个答案: