Javascript 交互式折线图显示xDomain之外的数据点
我需要生成一个多系列的交互式折线图,我正在使用NVD3,并为此启用了交互性(UseIntrTiveGuidLine)。但是,如果图表的Javascript 交互式折线图显示xDomain之外的数据点,javascript,charts,nvd3.js,Javascript,Charts,Nvd3.js,我需要生成一个多系列的交互式折线图,我正在使用NVD3,并为此启用了交互性(UseIntrTiveGuidLine)。但是,如果图表的xDomain比数据点跨度更窄,则似乎存在问题。考虑一个例子。您有3个数据系列,其中包含X点1、2和3。图表的X范围为[1.1,4]。现在,如果您在图表的Y轴上移动鼠标一点,您将看到——即使您使用clipEdge——NVD3仍然显示数据点和一个带有值的弹出窗口: 我已经为这个bug编译了一个JSFIDLE:。我的JavaScript代码: var data =
xDomain
比数据点跨度更窄,则似乎存在问题。考虑一个例子。您有3个数据系列,其中包含X点1、2和3。图表的X范围为[1.1,4]
。现在,如果您在图表的Y轴上移动鼠标一点,您将看到——即使您使用clipEdge
——NVD3仍然显示数据点和一个带有值的弹出窗口:
我已经为这个bug编译了一个JSFIDLE:。我的JavaScript代码:
var data = [
{
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);