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 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

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

3 个答案: