我一直试图了解Rickshaw / D3中的滑块如何与图形缩放相互作用。似乎当我将两者一起用于显示滑块选择的数据子集的动态图时,日志比例不正确。有什么我不对的吗?这是jsfiddle,代码的子集在这里。
用于初始化图表的HTML:
<div id="time">
<div id="yearindicator"></div>
<div id="slider-range"></div>
</div>
<div id="charts" class="clearfix">
<div class="chart">
<h3>Total</h3>
<div id="y_axis"></div>
<div id="chart_one"></div>
</div>
</div>
javascript的一部分是
logScale = d3.scale.log().domain([1, 1000]).range([0, 1]);
var data = [ {.... data not shown }];
var graph_one = new Rickshaw.Graph({
element: document.querySelector("#chart_one"),
height: 400,
width: 400,
renderer: 'scatterplot',
series: data
});
new Rickshaw.Graph.Axis.X({
graph: graph_one
});
new Rickshaw.Graph.Axis.Y.Scaled({
graph: graph_one,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
scale: logScale
});
graph_one.render();
var slider_one = new Rickshaw.Graph.RangeSlider({
element: document.querySelector('#slider-range'),
graph: graph_one
});
var y_ticks = new Rickshaw.Graph.Axis.Y.Scaled({
graph: graph_1,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
scale: logScale
});