Как изменить видоискатель (диаграмма фокуса) линейной диаграммы NVD3 программно?

Question

Пример, который я имею в виду здесь: http://nvd3.org/ghpages/lineWithFocus.html

То, что я хотел бы сделать, это иметь предустановленные диапазоны для программного изменения видимого диапазона видового искателя. Например, я мог бы иметь кнопки, чтобы показывать только последние 30 дней данных или показывать ВСЕ данные. Когда пользователь нажимает на любую из кнопок, видоискатель будет меняться, чтобы отображать только данные в выбранном диапазоне.

Есть ли у кого-нибудь какие-либо предложения о том, как это сделать?

Спасибо, CZ

Answer 1

Его немного сложнее выяснить решение, но как только вы получите, чтобы узнать это, его довольно прямо вперед.

Вам нужно просто обновить диаграмму, призывающую d3.select('#chart svg').datum(sendyouNewData)

Я использовал тот же код, как и в NVD3 site только дополнительный код, который я добавил был функция обновления диаграммы на кнопку мыши, о, и добавил ширину и высоту к графику.

Следующий код является проверенным кодом. Живой код here

Вашего 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

Answer 2

Предложения для скрытия/отобразите только на основе http://www.mkyong.com/jquery/jquery-toggle-example-to-display-and-hide-content/:

<button type="button" id="nv-toggle">Show View Finder</button> 

<script> 
$(document).ready(function() { 
    $('#nv-toggle').click(function() { 
    // make the collapse content to be shown or hide 
    var toggle_switch = $(this); 
    $('.nv-context').toggle(function() { 
     if($(this).css('display')=='none') { 
     toggle_switch.html('Show View Finder'); 
     } else { 
     toggle_switch.html('Hide View Finder'); 
     } 
    }); 
    }); 
}); 
</script> 

Answer 3

Вы можете фактически сделать это - взял немного копать, но вот как:

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() 
});