javascript - 如何以编程方式更改 NVD3 折线图的取景器（焦点图）？

Question

我正在谈论的示例在这里： http: //nvd3.org/ghpages/lineWithFocus.html

我想做的是预设范围以编程方式更改取景器的可见范围。例如，我可以有一个按钮来仅显示最近 30 天的数据或显示所有数据。当用户单击任一按钮时，取景器将更改为仅反映所选范围内的数据。

有没有人对如何去做这件事有任何建议？

谢谢， CZ

Answer 1

你实际上可以做到这一点 - 需要一点点挖掘，但方法如下：

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

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

找出解决方案有点棘手，但一旦你了解它，它就非常简单。

您只需更新图表调用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