d3を使用してノードリンクグラフのリンク長を増やします
user123456789
フォースグラフのリンク長を長くするにはどうすればよいですか。私のコードは以下に書かれています。何を変更すればよいですか？
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Add lines for every link in the dataset
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) {
return Math.sqrt(d.value);
});
// Add circles for every node in the dataset
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
// .style("fill", function (d) { return '#1f77b4'; })
.attr("r", 10)
.attr("fill", function(d) {
return '#aec7e8';
})
// .attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
);
// Basic tooltips
node.append("title")
.text(function(d) {
return d.id;
});
// Attach nodes to the simulation, add listener on the "tick" event
simulation
.nodes(graph.nodes)
.on("tick", ticked);
// Associate the lines with the "link" force
simulation.force("link")
.links(graph.links)
</script>読者にはっきりと見えるようにしたかったのです。これは、ノードの視覚化が互いに非常に近いためです。
Qの見知らぬ人
変更しようと.strength()のd3.forceManyBody()大きな値に
.force("charge", d3.forceManyBody().strength(-3));
.force("charge", d3.forceManyBody().strength(-30));
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
d3.jsのツリーパターンのノードをクリックして子ノードのグラフを描画します
- 2
D3グラフのノード位置に応じてリンクの始点と終点を調整します
- 3
選択されたノード、そのリンク、およびその子を、D3フォース有向グラフで強調表示します。
- 4
d3で、特定のノードへの実線のリンクをプログラムで破線のリンクに変更します
- 5
d3ノードからリンクを削除する-グラフはラベルをシャッフルします
- 6
D3v4の力指向グラフ-localStorageはリンクとノードを切断します
- 7
ノード間のリンクを持つグーグルマップ上のd3グラフ
- 8
d3力指向ネットワークグラフのラベルでノードとリンクを更新しても、ノードが適切に削除されません
- 9
セレンを使用して、クリックする棒グラフを制御し、ハイチャートのノードを修正します
- 10
D3を使用したハイパーリンクグラフバー
- 11
d3plusのノードをクリックすると、フィルタリングされたデータでリングを再描画します
- 12
switchcaseを独自のクラスメソッドにリファクタリングします。どうやって？
- 13
mysqlDBからMp3ファイルをダウンロードしてクリックあたりのダウンロード数を増やす
- 14
ウィジェットエントリを増やして、kivyスクロールビューウィンドウのサイズを増やします
- 15
クリックアンドドラッグでフィルターバーを使用してkm数を増減します
- 16
単純な独自のツリーアーキテクチャは子ノードを増やしています
- 17
CGRectMakeを使用してフルスクリーンの長方形を作成します
- 18
暗号クエリにノードラベルを追加して、dbヒットカウント（x2）を増やしましたか？
- 19
カーネルをコンパイルして、コマンドラインの最大長を増やします
- 20
イベントリスナーを使用してボタンのクリックを検出し、html要素の数を増やします
- 21
3つのノードを使用したRabbitmqクラスタリング
- 22
d3：スライダーを使用して新しい円をレンダリングします
- 23
アニメーションを使用したd3階層を使用してツリールートの周囲にノードを分散します
- 24
ノードを使用したマルチクライアントの長いポーリング処理
- 25
d3力指向グラフのノードをシングルクリックとダブルクリックの両方
- 26
javascriptインクリメントメソッドを使用してデータベースのクリック数を増やす方法は？
- 27
d3折りたたみ可能ツリーの行/ノード間のスペースを増やします
- 28
OCamlでサイクルを使用してグラフノードバリアントを定義する
- 29
リンクとノード数の関数としてd3リンク強度をどのようにカスタマイズしますか？（d3 v4）
コメントを追加