人力车日志比例图和滑块缩放

时间:2013-12-13 14:01:12

标签: d3.js rickshaw

我一直试图了解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
});

0 个答案:

没有答案