10

I'm usuing the lineWithFocusChart.js model shown in the nvd3 examples shown here: http://nvd3.org/ghpages/examples.html

I want to be able to choose a specific x range for the graph to be focused on at load. I thought there would be a variable in chart that I could set to accomplish this.

Chanka
  • 103
  • 1
  • 6
  • 3
    you may be able to do something like `chart.brush.extent([x0,x1])` where `x0` and `x1` are the values you want the ends of the brush to start on. See https://github.com/novus/nvd3/blob/master/nv.d3.js line 4908 to see that the brush is a `d3.svg.brush()`, and see https://github.com/mbostock/d3/wiki/SVG-Controls#brush to see what all you can do to a d3 brush. – elsherbini Jun 19 '13 at 18:58

2 Answers2

12

Suppose there's only one graph generated by nvd3 on the page:

chart = nv.graphs[0] // how to choose the graph by DOM id?
chart.brushExtent([10,20])
chart.update()

Thank @elsherbini's comment.

yegle
  • 5,795
  • 6
  • 39
  • 61
  • @pyCthon did you just try to call `nv.graphs` as a function? There's no such function invocation in my code, maybe you used `nv.graphs(0)` instead of `nv.graphs[0]`? – yegle Oct 07 '15 at 18:05
  • See this commit, https://github.com/tcotav/nvd3/commit/2edc2f7e0cdd9af7ab0f4bfbe47359b8f5fae31c, and my post here http://stackoverflow.com/questions/32999020/nvd3-accessing-a-chart-object – pyCthon Oct 07 '15 at 18:10
  • I deleted my old comment with the correct error now :). In the latest version of nvd3, `nv.graphs[0] -> TypeError: nv.graphs is undefined` – pyCthon Oct 07 '15 at 18:18
  • @yegle Is there any way to reset the brushExtent. Is there any function for reseting the focus that we selected in the graph. – JainZz Nov 01 '18 at 07:38
0

The solution provided here no longer works with the newest version of NVD3. Instead, you can use the following when you create the chart:

  chart = nv.models.lineWithFocusChart()
    .options({
      brushExtent: [10000,490000]
    });

Or this after you've created it:

chart.brushExtent([10000,490000]);

See the documentation here: http://nvd3-community.github.io/nvd3/examples/documentation.html#lineWithFocusChart

Brideau
  • 4,564
  • 4
  • 24
  • 33