Agregue enlaces únicos a todos los puntos de datos d3.js en el gráfico

Estoy usando nvd3.js para crear un gráfico de líneas que muestre calificaciones que he calculado a lo largo del tiempo. Tengo más información para cada punto de datos individual (calificación) y me gustaría tener cada punto de datos en el enlace del gráfico a una página única con más información sobre ese punto de datos específico.Agregue enlaces únicos a todos los puntos de datos d3.js en el gráfico

Por ejemplo: Me gustaría ser capaz de flotar sobre el primer punto de datos en el gráfico (x: 1345457533, y: -0,0126262626263) y haga clic en él para ir a una página específica (http: // www.example.com/info?id=1) que proporciona más información sobre esa calificación o punto de datos. Cada punto de datos tiene una identificación única y una url única a la que me gustaría vincular.

Aquí está el código que estoy utilizando para generar el gráfico:

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

El HTML:

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

Y aquí es un working example.

Fuente

2012-08-23 Scott Bartell

La [especificación SVG] (http://www.w3.org/TR/SVG/linking.html) describe cómo agregar enlaces a los elementos. ¿Podría proporcionar un ejemplo completo en jsfiddle, por favor? Intenté que tu código funcione, pero me falta algo. –

@LarsKotthoff aquí hay un [jsfiddle de trabajo] (http://jsfiddle.net/66hAj/). –

Gracias. Lo he echado un vistazo y, lamentablemente, nvd3.js no te ofrece el tipo de acceso de bajo nivel que necesitarías para lograr lo que deseas. No puede obtener los elementos de punto o ventanas emergentes. Entonces, básicamente tienes 3 opciones. Puedes modificar nvd3.js para hacer lo que quieras. Esto no debería ser demasiado difícil. O puede hacerlo en plain d3.js, que le dará acceso a todo. Esto tampoco debería ser demasiado difícil. En tercer lugar, podría tratar de identificar manualmente los elementos después de que nvd3.js lo haya hecho funcionar y agregar lo que desea. Hacky y muy probablemente difícil, no recomendado. –

Aquí es una solución de trabajo 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 
    } 
})

He usado jQuery para enlazar un controlador de clic en el lienzo y luego obtener los datos basados en el elemento hace clic en el gráfico.

currentItem le da la id del elemento actual que ha hecho clic en

currentUrl da la URL relacionada con el elemento actualmente se hace clic.

Puede ver el cambio de URL en el div debajo del gráfico al hacer clic en cada punto sobre el gráfico.

Fuente

2012-10-17 08:03:08

Impresionante, debería haber pensado en hacer esto. ¡Gracias por la respuesta! –

@ScottBartell de nada !! –

Agregue enlaces únicos a todos los puntos de datos d3.js en el gráfico

Respuesta

Cuestiones relacionadas