プログラミング force-layout

1

Stack Overflowの最初の質問なので、我慢してください！私はd3.jsを初めて使用しましたが、他の人がそれを使って達成できることに一貫して驚かされています...そして、私が自分でどれほどの進歩を遂げることができたかに驚かされています！明らかに私は何かを壊していないので、私はここの親切な魂が私に光を見せてくれることを願っています。私の意図は、単に以下を実行する再利用可能なJavaScript関数を作成することです。指定されたDOM要素に空の有向グラフを作成しますラベル付けされた画像を含むノードをそのグラフに追加および削除し、それらの間の接続を指定できます。私はhttp://bl.ocks.org/950642を出発点として採用しました。これは、本質的に、私が作成したい種類のレイアウトだからです。私のコードは次のようになります： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="underscore-min.js"></script> <script type="text/javascript" src="d3.v2.min.js"></script> <style type="text/css"> .link { stroke: #ccc; } .nodetext { pointer-events: none; font: 10px sans-serif; } body { width:100%; height:100%; margin:none; padding:none; } #graph { width:500px;height:500px; border:3px solid black;border-radius:12px; margin:auto; } …

89 javascript d3.js force-layout

5

ノードからすべての子要素を削除してから、異なる色とサイズで再度適用するにはどうすればよいですか？

したがって、ノード、リンク、その他の要素を設定するための次の力レイアウトグラフコードがあります。 var setLinks = function () { link = visualRoot.selectAll("line.link") .data(graphData.links) .enter().append("svg:line") .attr("class", "link") .style("stroke-width", function (d) { return nodeStrokeColorDefault; }) .style("stroke", function (d) { return fill(d); }) .attr("x1", function (d) { return d.source.x; }) .attr("y1", function (d) { return d.source.y; }) .attr("x2", function (d) { return d.target.x; }) .attr("y2", …

87 d3.js force-layout

6

D3力レイアウトグラフにズームインする方法はありますか？

D3には、ここに力指向のレイアウトがあります。このグラフにズームを追加する方法はありますか？現在、マウスホイールイベントをキャプチャすることはできましたが、再描画関数自体の記述方法がよくわかりません。助言がありますか？ var vis = d3.select("#graph") .append("svg:svg") .call(d3.behavior.zoom().on("zoom", redraw)) // <-- redraw function .attr("width", w) .attr("height", h);

80 javascript jquery d3.js zoom force-layout

タグ付けされた質問 「force-layout」

タグ付けされた質問「force-layout」