2

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

0 回答 0