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

Question

I'm using nvd3.js to create a line graph that displays ratings that I have calculated over time. I have more information for each individual data point (rating) and would like to have each data point on the graph link to a unique page with more information about that specific data point.

For example: I would like to be able to hover over the first data point on the graph (x: 1345457533, y: -0.0126262626263) and click on it to go to a specific page (http://www.example.com/info?id=1) that provides more information about that rating or data point. Each data point has a unique id and unique url that I would like to link to.

Here is the code that I am using to generate the graph:

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"
    }
  ];
}

The HTML:

<div id="chart">
  <svg></svg>
</div>

And here is a working example.

Natoshanatron

The SVG spec describes how to add links to elements. Could you provide a complete example on jsfiddle please? I've tried to get your code working, but I must be missing something. – Hyoscyamus

@LarsKotthoff here's a working jsfiddle. – Natoshanatron

Thanks. I've had a look at it and unfortunately nvd3.js doesn't give you the kind of low-level access you'd need to achieve what you want. You can't get the point elements or popups. So you basically have 3 choices. You could modify nvd3.js to do what you want. This shouldn't be too hard. Or you could do it in plain d3.js, which will give you access to everything. This shouldn't be too hard either. Third, you could try to manually identify the elements after nvd3.js has done it's work and add what you want. Hacky and most likely difficult, not recommended. – Hyoscyamus

You should be able to add whatever you want using d3.js itself by firing a selector that finds elements and adds the link needed. look at d3 docs. – Ebro

Answer 1

Here is an working solution 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
    }
})

I've used jQuery to bind a click handler on the canvas and then get the data based on the element clicked on the graph.

currentItem gives you the id of the current item that you clicked on

currentUrl gives the url related to the currently clicked item.

You can see the url change in the div below the chart as you click on each point over the graph.

Chateau

Awesome, I should have thought of doing this. Thanks for the answer! – Natoshanatron