javascript - interactive line chart shows data points outside xDomain -

javascript - interactive line chart shows data points outside xDomain -

i need produce interactive line chart of multiple series , i'm using nvd3 interactivity turned on (useintractiveguidline). there appears problem if xdomain of chart more narrow info points span. consider example. have 3 info series x points 1, 2, , 3. chart has x range of [ 1.1, 4 ]. now, if move mouse arount y axis of chart bit, you'll see -- if utilize clipedge -- nvd3 still displaying info points , pop-up values:

i've compiled jsfiddle bug: http://jsfiddle.net/e6kwrqdw/. javascript code:

var info = [ { key: 's#1', values: [ { x: 1, y: 5 }, { x: 2, y: 7 }, { x: 3, y: 3 } ] }, { key: 's#2', values: [ { x: 1, y: 4 }, { x: 2, y: 8 }, { x: 3, y: 4 } ] }, { key: 's#3', values: [ { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 6 } ] } ]; var chart = nv.models.linechart() .useinteractiveguideline(true) .tooltips(true) .margin({ left: 200 }) .xdomain([ 1.1, 4 ]) .clipedge(true) .showlegend(true); d3.select('#chart').datum(data).call(chart);

javascript charts nvd3.js