4

私が話している例はここにあります: http://nvd3.org/ghpages/lineWithFocus.html

私がやりたいのは、ビューファインダーの可視範囲をプログラムで変更するための範囲を事前に設定することです。たとえば、過去 30 日間のデータのみを表示するボタンや、すべてのデータを表示するボタンを作成できます。ユーザーがいずれかのボタンをクリックすると、ビューファインダーが変更され、選択した範囲のデータのみが反映されます。

これを行う方法について何か提案はありますか？

ありがとう、CZ

4

3 に答える 3

4

実際にこれを行うことができます-少し掘り下げましたが、方法は次のとおりです。

nv.addGraph(function() {
  window.chart = nv.models.lineWithFocusChart()
  // Do whatever you need to do to set up the chart, and keep a reference to it
});

$("#preset-range").on("click", function() {
  // Get the min and max
  min = $(this).data("min")
  max = $(this).data("max")

  // Change the focus chart range programatically
  chart.brushExtent([min, max]).update()
});
于 2013-12-04T04:45:06.667 に答える
0

解決策を見つけるのは少し難しいですが、一度理解すれば、かなり簡単です。

チャートの呼び出しを更新するだけですd3.select('#chart svg').datum(sendyouNewData)

NVD3 サイトと同じコードを使用しました。追加した唯一のコードは、ボタン クリック時のチャート更新機能で、チャートに幅と高さを追加しました。

次のコードは、動作テスト済みのコードです。ライブコードはこちら

あなたのHTML

<input type="button"  id="change1" value="Change 1"/>
<input type="button"  id="change2" value="Change 2"/>
<div id="chart">
    <svg></svg>
</div>

あなたの JavaScript

var dynamic_lineWithFocusChart, lineWithFocusChart;
var width = 500,
    height = 500;

nv.addGraph(function () {
    var chart = nv.models.lineWithFocusChart().width(width).height(height);
    chart.xAxis.tickFormat(d3.format(',f'));
    chart.yAxis.tickFormat(d3.format(',.2f'));
    chart.y2Axis.tickFormat(d3.format(',.2f'));

    dynamic_lineWithFocusChart = d3.select('#chart svg').datum(testData());
    dynamic_lineWithFocusChart.transition().duration(1000).call(chart).attr('width', width).attr('height', height);

    nv.utils.windowResize(chart.update);

    lineWithFocusChart = chart;
    return chart;
});

/*
 * Simple test data generator
 */
function testData() {
    return stream_layers(3, 128, .1).map(function (data, i) {
        return {
            key: 'Stream' + i,
            values: data
        };
    });
}

/*
 * Update the Line Focus chart with the Button Click
 */
$("#change1,#change2 ").click(function () {
    dynamic_lineWithFocusChart.datum(testData());
    dynamic_lineWithFocusChart.transition().duration(1000).call(lineWithFocusChart);
    dynamic_lineWithFocusChart.update
});

それがあなたの質問に答えてくれることを願っています:D

于 2013-05-31T09:09:58.800 に答える