Dati in tempo reale con D3

Question

Mi chiedevo se potevo usare la libreria D3 con dati in tempo reale che il mio server avrebbe inviato tramite websocket. Non riesco a vedere alcuna documentazione o esempi che dimostrino questo. La mia aspettativa iniziale era di farlo dal seguente esempio dal codice:

ws = new WebSocket(ws://localhost:8888/ma"); 
some more code.... 

    ws.onmessage = function(evt) { 
     d3.json("evt.data", function(json) { 
......  
.......More code..... 
...... 
} 
} 

Ma questo non sembra funzionare, ma so che il cliente riceve i dati controllando il registro della console.

Inoltre v'è una funzione ricorsiva, che si appiattisce un documento JSON:

// Returns a flattened hierarchy containing all leaf nodes under the root. 
function classes(root) { 
var classes = []; 

function recurse(name, node) { 
    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
    else classes.push({packageName: name, className: node.name, value: node.size}); 
    } 

    recurse(null, root); 
    return {children: classes}; 
} 

    console.log(evt.data); 
    }; 

    ws.onclose = function (evt) { 
     alert("Connection terminated")}; 

    }); 
}); 

Se il mio JSON doc è piatta già allora presumo che non sarà necessario cioè:

{ID: 1, Name: 'my name', age: 65, car: 'Ford'} 

D3 è completamente nuovo per me, quindi l'aiuto sarebbe apprezzato.

Grazie

Answer 1

Non ho usato WebSockets con D3 (ancora), ma sembra che vi aspettate d3.json di essere un parser JSON. Non è - è un caricatore AJAX che delega a JSON.parse per l'analisi. Quindi probabilmente vuoi qualcosa del tipo:

var ws = new WebSocket("ws://localhost:8888/ma"); 

var data = []; 

ws.onmessage = function(evt) { 
    // append new data from the socket 
    data.push(JSON.parse(evt.data)); 
    update(); 
}; 

// now use the standard join pattern to deal with updates 
function update() { 
    var chunk = d3.selectAll('p') 
     .data(data); 

    // entry might be all you need, if you're always appending 
    chunk.enter().append('p') 
     .text(function(d) { return d; }); 

}