Fügen Sie allen d3.js-Datenpunkten im Diagramm

eindeutige

hinzu. Ich verwende nvd3.js, um ein Liniendiagramm zu erstellen, das Bewertungen anzeigt, die ich im Laufe der Zeit berechnet habe. Ich habe mehr Informationen für jeden einzelnen Datenpunkt (Bewertung) und möchte, dass jeder Datenpunkt in der Grafik auf eine eindeutige Seite mit mehr Informationen über diesen bestimmten Datenpunkt verweist.Fügen Sie allen d3.js-Datenpunkten im Diagramm

Zum Beispiel: Ich möchte über den ersten Datenpunkt schweben können, auf dem Graphen (x: 1345457533, y: -,0126262626263) und klicken Sie darauf, um eine bestimmte Seite zu gehen (http: // www.example.com/info?id=1), die weitere Informationen zu dieser Bewertung oder diesem Datenpunkt enthält. Jeder Datenpunkt hat eine eindeutige ID und eine eindeutige URL, mit der ich verlinken möchte. Hier

ist der Code, den ich um die Grafik zu erzeugen bin mit:

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

Die HTML:

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

Und hier ist ein working example. Hier

Quelle

2012-08-23 Scott Bartell

Die [SVG-Spezifikation] (http://www.w3.org/TR/SVG/linking.html) beschreibt, wie Verknüpfungen zu Elementen hinzugefügt werden. Könnten Sie bitte ein vollständiges Beispiel für jsfiddle geben? Ich habe versucht, deinen Code zum Laufen zu bringen, aber ich muss etwas verpassen. –

@LarsKotthoff hier ist ein [working jsfiddle] (http://jsfiddle.net/66hAj/). –

Danke. Ich habe es mir angesehen und leider bietet nvd3.js nicht die Art von Low-Level-Zugriff, die Sie benötigen, um zu erreichen, was Sie wollen. Sie können die Punktelemente oder Popups nicht erhalten. Sie haben also grundsätzlich 3 Möglichkeiten. Sie könnten nvd3.js modifizieren, um das zu tun, was Sie wollen. Das sollte nicht zu schwer sein. Oder Sie können es in einfachen d3.js tun, die Ihnen Zugriff auf alles geben. Dies sollte auch nicht zu schwer sein. Drittens könnten Sie versuchen, die Elemente manuell zu identifizieren, nachdem nvd3.js seine Arbeit getan hat und fügen Sie hinzu, was Sie wollen. Hacky und wahrscheinlich schwierig, nicht zu empfehlen. –

ist eine Arbeitslösung 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 
    } 
})

ich jQuery verwendet habe einen Click-Handler auf der Leinwand zu binden und dann die Daten basierend auf dem Element erhalten auf dem Diagramm angeklickt.

currentItem gibt Ihnen die ID des aktuellen Elements, die Sie auf

geklickt

currentUrl die URL geben den momentan angeklickt Artikel verwendet.

Sie können die URL-Änderung im div unterhalb des Diagramms sehen, wenn Sie auf jeden Punkt über dem Diagramm klicken.

Quelle

2012-10-17 08:03:08

Ehrfürchtig, ich hätte daran gedacht. Danke für die Antwort! –

@ScottBartell de nada !! –

Fügen Sie allen d3.js-Datenpunkten im Diagramm

Antwort

Verwandte Themen