D3.js 人力车原木比例图和滑块比例
我一直在试图理解人力车/D3中的滑块是如何与图形的缩放进行交互的。看起来,当我将两者一起用于显示滑块所选数据子集的动态图时,日志比例不正确。有什么事我做得不对吗?这里是一个示例,代码的一个子集在这里 用于初始化图形的HTML:D3.js 人力车原木比例图和滑块比例,d3.js,rickshaw,D3.js,Rickshaw,我一直在试图理解人力车/D3中的滑块是如何与图形的缩放进行交互的。看起来,当我将两者一起用于显示滑块所选数据子集的动态图时,日志比例不正确。有什么事我做得不对吗?这里是一个示例,代码的一个子集在这里 用于初始化图形的HTML: <div id="time"> <div id="yearindicator"></div> <div id="slider-range"></div> </div> <div
<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>
在你的情况下,哪个是对数刻度?在JSFIDLE中,两个轴在我看来都很好——它们都在使用滑块时进行调整。
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
});