D3.js 人力车原木比例图和滑块比例

D3.js 人力车原木比例图和滑块比例,d3.js,rickshaw,D3.js,Rickshaw,我一直在试图理解人力车/D3中的滑块是如何与图形的缩放进行交互的。看起来,当我将两者一起用于显示滑块所选数据子集的动态图时,日志比例不正确。有什么事我做得不对吗?这里是一个示例,代码的一个子集在这里 用于初始化图形的HTML: <div id="time"> <div id="yearindicator"></div> <div id="slider-range"></div> </div> <div

我一直在试图理解人力车/D3中的滑块是如何与图形的缩放进行交互的。看起来,当我将两者一起用于显示滑块所选数据子集的动态图时,日志比例不正确。有什么事我做得不对吗?这里是一个示例,代码的一个子集在这里

用于初始化图形的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>
在你的情况下,哪个是对数刻度?在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
});