Set 'focus' area in nvd3.js lineWithFocusChart

Question

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.

Underfoot

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 github.com/novus/nvd3/blob/master/nv.d3.js line 4908 to see that the brush is a d3.svg.brush(), and see github.com/mbostock/d3/wiki/SVG-Controls#brush to see what all you can do to a d3 brush. – Stonyhearted

Answer 1

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.

Katrinka

@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]? – Katrinka

See this commit, github.com/tcotav/nvd3/commit/…, and my post here #32999520 – Compline

I deleted my old comment with the correct error now :). In the latest version of nvd3, nv.graphs[0] -> TypeError: nv.graphs is undefined – Compline

@Katrinka Is there any way to reset the brushExtent. Is there any function for reseting the focus that we selected in the graph. – Jeremiah

Answer 2

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

Halfpint

Yeah, the "documentation" is very helpful: "No info for this option yet..." – Marniemaro