向Graph中的所有d3.js数据点添加唯一链接

Add Unique Links to all d3.js Data Points in Graph

本文关键字：数据 添加 唯一 链接 js d3 Graph      更新时间：2023-09-26

我使用nvd3.js创建一个折线图，显示我随时间计算的评分。我有每个单独数据点（评级）的更多信息，并希望将图表上的每个数据点链接到一个唯一的页面，其中包含有关该特定数据点的更多信息。

例如：我希望能够将鼠标悬停在图形上的第一个数据点（x:134557533，y:-0.016262626263）上，然后单击它转到特定页面(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>

这是一个工作的例子。

这是一个有效的解决方案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的变化。

相关文章：