我正在使用
nvd3.js创建一个线形图,显示我随时间推移的评分.我有更多的信息为每个单独的数据点(评级),并希望将图表上的每个数据点链接到一个唯一的页面,有关该特定数据点的更多信息.
例如：我希望能够将鼠标悬停在图表上的第一个数据点上(x：1345457533,y：-0.0126262626263),然后点击它进入特定页面(http://www.example.com/ info？id = 1),提供有关该评级或数据点的更多信息.每个数据点都有一个唯一的id和唯一的URL,我想链接到.
这是我用来生成图形的代码：
nv.addGraph(function() {
var chart = nv.models.lineChart();
chart.xAxis
.axisLabel('Time')
.tickFormat(d3.format('r'));
chart.yAxis
.axisLabel('rating')
.tickFormat(d3.format('.2f'));
d3.select('#chart svg')
.datum(data())
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function data() {
var data = [ { x: 1345457533,y: -0.0126262626263 },{ x: 1345457409,y: 0.0224089635854 },{ x: 1345457288,y: 0.0270935960591 },{ x: 1345457168,y: -0.0378151260504 },{ x: 1345457046,y: -0.115789473684 } ]
return [
{
values: data,key: "Sample1",color: "#232066"
}
];
}
HTML：
<div id="chart"> <svg></svg> </div>
这里是working example.
解决方法
这是一个工作的解决方案
http://jsfiddle.net/66hAj/7/
$('#chart svg').on('click',function(e){
var elem = $(e.target),currentItem,currentUrl;
if(elem.parent('.nv-point-paths').length) {
currentItem = e.target.getAttribute('class').match(/\d+/)[0];
currentUrl = _data[0].urls[ currentItem ];
$('#log').text(currentUrl);
//window.location = currentUrl
}
})
我已经使用jQuery绑定画布上的点击处理程序,然后根据图上点击的元素获取数据.
currentItem给出您点击的当前项目的ID
currentUrl给出与当前点击的项目相关的URL.
当您点击图表上的每个点时,您可以在图表下面的div中看到url更改.