この d3 プロジェクトのサンプル コードを使用してd3 グラフを表示する方法を学習しましたが、円の中央にテキストを表示できないようです (この例とこの例のように)。私は他の例を見て、追加しようとしました
node.append("title").text("Node Name To Display")
と
node.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em").text("Node Name To Display")
ノードが定義された直後ですが、表示される唯一の結果は、各ノードにカーソルを合わせると「表示するノード名」が表示されることです。円内のテキストとして表示されません。独自の svg テキスト オブジェクトを作成し、円の半径の座標に基づいて配置する必要がある座標を決定する必要がありますか? 他の 2 つの例から、d3 はすでに何らかの形でこれを処理しているように見えます。呼び出し/設定する適切な属性がわかりません。
グラフやツリーのビジュアライゼーションにラベルを追加する方法を示す例はたくさんありますが、おそらく最も単純なものとして次の例から始めます。
コードへのリンクを投稿していませんがnode、SVG サークル要素の選択を参照していると思います。circle 要素はコンテナではないため、circle 要素に text 要素を追加することはできません。円へのテキスト要素の追加は無視されます。
通常、G 要素を使用して、サークル要素 (または上記の画像要素) と各ノードのテキスト要素をグループ化します。結果の構造は次のようになります。
<g class="node" transform="translate(130,492)">
<circle r="4.5"/>
<text dx="12" dy=".35em">Gavroche</text>
</g>
データ結合を使用して各ノードの G 要素を作成し、selection.appendを使用してそれぞれに円とテキスト要素を追加します。このようなもの：
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
このアプローチの欠点の 1 つは、ラベルを円の上に描画したい場合があることです。SVG はまだ z-index をサポートしていないため、要素はドキュメント順に描画されます。したがって、上記のアプローチでは、ラベルがその circle の上に描画されますが、他の circle の下に描画される場合があります。次のように、2 つのデータ結合を使用し、円とラベルに個別のグループを作成することで、これを修正できます。
<g class="nodes">
<circle transform="translate(130,492)" r="4.5"/>
<circle transform="translate(110,249)" r="4.5"/>
…
</g>
<g class="labels">
<text transform="translate(130,492)" dx="12" dy=".35em">Gavroche</text>
<text transform="translate(110,249)" dx="12" dy=".35em">Valjean</text>
…
</g>
そして対応する JavaScript:
var circle = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 4.5)
.call(force.drag);
var text = svg.append("g")
.attr("class", "labels")
.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
この手法は、モバイル特許訴訟の例で使用されています (白い影を作成するために追加のテキスト要素が使用されています)。
このガイドは、同様のことを達成しようとするのに非常に役立つことがわかりました。
https://www.dashingd3js.com/svg-text-element
上記のリンクに基づいて、このコードは円ラベルを生成します:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body style="overflow: hidden;">
<div id="canvas" style="overflow: hidden;"></div>
<script type="text/javascript">
var graph = {
"nodes": [
{name: "1", "group": 1, x: 100, y: 90, r: 10 , connected : "2"},
{name: "2", "group": 1, x: 200, y: 50, r: 15, connected : "1"},
{name: "3", "group": 2, x: 200, y: 130, r: 25, connected : "1"}
]
}
$( document ).ready(function() {
var width = 2000;
var height = 2000;
var svg = d3.select("#canvas").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var lines = svg.attr("class", "line")
.selectAll("line").data(graph.nodes)
.enter().append("line")
.style("stroke", "gray") // <<<<< Add a color
.attr("x1", function (d, i) {
return d.x
})
.attr("y1", function (d) {
return d.y
})
.attr("x2", function (d) {
return findAttribute(d.connected).x
})
.attr("y2", function (d) {
return findAttribute(d.connected).y
})
var circles = svg.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", function (d, i) {
return d.r
})
.attr("cx", function (d, i) {
return d.x
})
.attr("cy", function (d, i) {
return d.y
});
var text = svg.selectAll("text")
.data(graph.nodes)
.enter()
.append("text");
var textLabels = text
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.text( function (d) { return d.name })
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "red");
});
function findAttribute(name) {
for (var i = 0, len = graph.nodes.length; i < len; i++) {
if (graph.nodes[i].name === name)
return graph.nodes[i]; // Return as soon as the object is found
}
return null; // The object was not found
}
</script>
</body>
</html>
大きなラベルに合わせてノードを拡大したい場合は、描画後に SVG テキスト ノードの getBBox プロパティを使用できます。固定座標を持つノードのリストと2つの可能な形状について、私がそれを行った方法は次のとおりです。
nodes.forEach(function(v) {
var nd;
var cx = v.coord[0];
var cy = v.coord[1];
switch (v.shape) {
case "circle":
nd = svg.append("circle");
break;
case "rectangle":
nd = svg.append("rect");
break;
}
var w = 10;
var h = 10;
if (v.label != "") {
var lText = svg.append("text");
lText.attr("x", cx)
.attr("y", cy + 5)
.attr("class", "labelText")
.text(v.label);
var bbox = lText.node().getBBox();
w = Math.max(w,bbox.width);
h = Math.max(h,bbox.height);
}
var pad = 4;
switch (v.shape) {
case "circle":
nd.attr("cx", cx)
.attr("cy", cy)
.attr("r", Math.sqrt(w*w + h*h)/2 + pad);
break;
case "rectangle":
nd.attr("x", cx - w/2 - pad)
.attr("y", cy - h/2 - pad)
.attr("width", w + 2*pad)
.attr("height", h + 2*pad);
break;
}
});
テキストを上に表示するために、形状が追加され、テキストが追加され、形状が配置されることに注意してください。