2014-07-11 25 views
6

Ho un grafico a linee e ogni volta che la pagina si aggiorna cambia i dati, il che è ottimo ma ho bisogno di aggiornare un clic dell'utente. Questo perché alla fine ci saranno altri campi di input sulla pagina e l'aggiornamento della pagina distruggerebbe la loro sessione corrente.NVD3 - Come aggiornare la funzione dati ai nuovi dati del prodotto al momento del clic

jsfiddle - http://jsfiddle.net/darcyvoutt/dXtv2/

Ecco l'impostazione del codice per creare la linea:

function economyData() { 

    // Rounds 
    var numRounds = 10; 

    // Stability of economy 
    var stable = 0.2; 
    var unstable = 0.6; 
    var stability = unstable; 

    // Type of economy 
    var boom = 0.02; 
    var flat = 0; 
    var poor = -0.02; 
    var economyTrend = boom; 

    // Range  
    var start = 1; 
    var max = start + stability; 
    var min = start - stability; 

    // Arrays 
    var baseLine = []; 
    var economy = []; 

    // Loop 
    for (var i = 0; i < numRounds + 1; i++) {  

     baseLine.push({x: i, y: 1}); 

     if (i == 0) { 

     economyValue = 1; 

     } else { 

     var curve = Math.min(Math.max(start + ((Math.random() - 0.5) * stability), min), max);   

     economyValue = Math.round(((1 + (economyTrend * i)) * curve) * 100)/100; 

     } 

     economy.push({x: i, y: economyValue}); 

    } 

    return [ 
     { 
     key: 'Base Line', 
     values: baseLine 
     }, 
     { 
     key: 'Economy', 
     values: economy 
     } 
    ]; 
    } 

Qui è quello che ho cercato di scrivere, ma non riuscito per l'aggiornamento:

function update() { 
     sel = svg.selectAll(".nv-line") 
     .datum(data); 

     sel 
     .exit() 
     .remove(); 

     sel 
     .enter() 
     .append('path') 
      .attr('class','.nv-line'); 

     sel 
     .transition().duration(1000); 

    }; 

    d3.select("#update").on("click", data); 
+0

nel tuo violino, sta dando svg non è definito alla riga sel = svg.selectAll (". Nv-line") Ma svg non è stato dichiarato o definito da nessuna parte. Dai un'occhiata a questo. –

risposta

15

Ecco cosa Ho fatto diversamente con il tuo codice.

// Maintian an instance of the chart 
var chart; 

// Maintain an Instance of the SVG selection with its data 
var chartData; 

nv.addGraph(function() { 
    chart = nv.models.lineChart().margin({ 
     top : 5, 
     right : 10, 
     bottom : 38, 
     left : 10 
    }).color(["lightgrey", "rgba(242,94,34,0.58)"]) 
     .useInteractiveGuideline(false) 
     .transitionDuration(350) 
     .showLegend(true).showYAxis(false) 
     .showXAxis(true).forceY([0.4, 1.6]); 

    chart.xAxis.tickFormat(d3.format('d')).axisLabel("Rounds"); 
    chart.yAxis.tickFormat(d3.format('0.1f')); 

    var data = economyData(); 

    // Assign the SVG selction 
    chartData = d3.select('#economyChart svg').datum(data); 
    chartData.transition().duration(500).call(chart); 

    nv.utils.windowResize(chart.update); 

    return chart; 
}); 

Ecco come la funzione update() assomiglia:

function update() { 
    var data = economyData(); 

    // Update the SVG with the new data and call chart 
    chartData.datum(data).transition().duration(500).call(chart); 
    nv.utils.windowResize(chart.update); 
}; 

// Update the CHART 
d3.select("#update").on("click", update); 

Ecco un link ad un working version del codice.

Spero che aiuti.

+0

Grazie! Individuare. Ho persino lavorato con un nuovo codice che ho scritto. – dvoutt

+2

Nota: non riesco a far funzionare l'esempio. Clonando e giocando in locale, ricevo un errore su transitionDuration (per cui sembra che [la sintassi sia cambiata] (https://github.com/nvd3-community/nvd3/blob/gh-pages/examples/lineChart.html#L50 -L53)). Anche con quello rimosso non ottengo nulla sul violino (nonostante lavori localmente). – bwarren2

+2

@ bwarren2 Ho aggiornato il codice di shabeer90 per farlo funzionare di nuovo. Dai un'occhiata a: http://jsfiddle.net/eu26dLcx/ – ajaybc

Problemi correlati