5

サーバーがWebSocket経由で送信するリアルタイムデータでD3ライブラリを使用できるかどうか疑問に思いました。これを示すドキュメントや例は見当たりません。私の最初の期待は、コードからの次のサンプルによってそうすることでした：

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

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

しかし、これは機能していないようですが、クライアントがコンソールログをチェックしてデータを受信して​​いることはわかっています。

さらに、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")};

  });
 });

私のJSONドキュメントがすでにフラットである場合、それは必要ないと思います。

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

D3は私にとってまったく新しいので、助けていただければ幸いです。

ありがとう

4

1 に答える 1

6

私は（まだ）D3でWebSocketを使用していませんd3.jsonが、JSONパーサーになることを期待しているようです。JSON.parseそうではありません-解析のために委任するのはAJAXローダーです。したがって、おそらく次のようなものが必要です。

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; });

}
于 2012-12-04T00:51:12.703 に答える