2

私は D3.js を学び始めており、強制レイアウトを使用して簡単なアプリを作成したいと考えていました。目標は、浮遊し、マウスを使用してドラッグできる 3 つのノードを作成することです。これは、ドキュメントを使用してどこまで到達したかですが、ウィンドウの左上隅に小さな黒い円が表示されるだけです (3 つすべてが重なっていると思います)。私は各ステップにコメントを付けました - 少なくともそれは彼らがやっていることだと思います.

<!doctype html>
<html>
<head>
    <title>Simple Force Layout</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
</head>

<body>
    <div id="canvas"></div>

    <script type="text/javascript">

var conf = {
    canvasWidth: 600,
    canvasHeight: 400
}

var nodes = [
    { 'name': 'Node 1' },
    { 'name': 'Node 2' },
    { 'name': 'Node 3' }
];

// Add nodes to force layout and start it
var force = d3.layout.force()
    .nodes(nodes)
    .size([conf.canvasWidth, conf.canvasHeight])
    .start();

// Create an svg element
var svg = d3.select("#canvas")
    .append("svg:svg")
    .attr("width", conf.canvasWidth)
    .attr("height", conf.canvasHeight);    

// Create a circle for each node
var circle = svg.append("svg:g").selectAll("circle")
    .data(force.nodes())
  .enter().append("svg:circle")
    .attr("r", 6)
    .call(force.drag);

    </script>
</body>
</html>

私の質問:

  1. 私は何が欠けていますか？ノードを浮遊させてドラッグ可能にするには、他に何をする必要がありますか?
  2. ノードのいくつかの属性に基づいて、円形と長方形のノードを混在させたいと思います。どうすればいいですか？

  3. アプリケーションを実行すると、Firebug に次のエラーが表示されます。

    「NetworkError: 404 Not Found - http://mbostock.github.com/d3/d3.geom.js?1.29.1」 d3.geom.js?1.29.1

    「NetworkError: 404 Not Found - http://mbostock.github.com/d3/d3.layout.js?1.29.1」

どうしてこれなの？私が試したいくつかの強制レイアウトの例でもこのエラーが発生していますが、うまく機能しているようです!

4

1 に答える 1

4

うまくいく例を示して、あなたの質問に答えようとします。

  1. 強制レイアウトには、画面の上部にすべてのノードを表示することから開始するという特殊性があります。ノード間にはリンクがないため (リンクがある場合、コードには表示されません)、それらが互いの上に描画されるのは正常です。ノードの X および Y アトリビュートを画面上のランダムな位置に設定することで、この初期レンダリングを修正することができます。フローティングの問題については、テストしていないため、これが機能するかどうかは 100% 確信が持てませんが、ノード、または少なくとも表示ウィンドウの隅にさまざまな力を適用してみてください。これにより、それらが移動して画面の外に出ないようになります (または、ウィンドウのバウンディング ボックスを使用します)。また、ノードが常に移動することを確認したい場合は、レイアウトの速度と安定性に関連するいくつかの力属性を確認する必要があります。しばらく浮いて固定位置にとどまるだけではありません。ノードをドラッグ可能にするための呼び出しhttp://bl.ocks.org/1095795のよう な force.drag

  2. この例は、フォース レイアウトでさまざまな形状のノードを表示する方法を示しています: http://bl.ocks.org/1062383。

  3. D3 の単一ファイル バージョンをお勧めします。通常は d3v2 などと呼ばれるファイルが含まれています。ネットワークの問題や CORS の問題などにより、これらのファイルにアクセスできない可能性があります。ファイル。D3 の非常に古いバージョン (1 年前?) を使用しているようです。次のスニペットのように見えるバージョンでは、おそらくそのエラーは発生しません。オンライン バージョンを使用できない場合は、ファイルをダウンロードして同じディレクトリに配置してください。

D3 の例で少し遊んで、ドキュメントを読んでください。

于 2012-05-21T17:33:54.227 に答える