为图表中的所有 d3.js 数据点添加唯一链接答案

【问题标题】：Add Unique Links to all d3.js Data Points in Graph为图表中的所有 d3.js 数据点添加唯一链接
【发布时间】：2012-08-19 10:19:53
【问题描述】：

我正在使用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。

【问题讨论】：

SVG spec 描述了如何向元素添加链接。你能提供一个关于jsfiddle的完整例子吗？我试图让你的代码正常工作，但我一定遗漏了一些东西。
@LarsKotthoff 这里是working jsfiddle。
谢谢。我已经看过了，不幸的是 nvd3.js 并没有为您提供实现所需目标所需的那种低级访问权限。您无法获取点元素或弹出窗口。所以你基本上有3个选择。你可以修改 nvd3.js 来做你想做的事。这应该不会太难。或者你可以用普通的 d3.js 来做，它可以让你访问所有东西。这也不应该太难。第三，您可以尝试在 nvd3.js 完成工作后手动识别元素并添加您想要的内容。 hacky，很可能很难，不推荐。
您应该能够通过触发查找元素并添加所需链接的选择器来使用 d3.js 本身添加您想要的任何内容。查看 d3 文档。

标签： javascript svg d3.js nvd3.js

【解决方案1】：

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

【讨论】：

太棒了，我应该想到这样做。感谢您的回答！