web-dev-qa-db-ja.com

d3.jsのノードの中心にラベルを配置する

私はd3.jsから始めて、各ノードに中央に番号ラベルが含まれるノードの行を作成しようとしています。

目的の結果を視覚的に生成することはできますが、各テキスト要素のx-y座標をハードコーディングする必要があるため、その方法はほとんど最適ではありません。コードは次のとおりです。

var svg_w = 800;
var svg_h = 400;
var svg = d3.select("body")
    .append("svg")
    .attr("width", svg_w)
    .attr("weight", svg_h);

var dataset = [];
for (var i = 0; i < 6; i++) {
    var datum = 10 + Math.round(Math.random() * 20);
    dataset.Push(datum);
}

var nodes = svg.append("g")
               .attr("class", "nodes")
               .selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("class", "node")
               .attr("cx", function(d, i) {
                   return (i * 70) + 50;
               })
               .attr("cy", svg_h / 2)
               .attr("r", 20);

var labels = svg.append("g")
                .attr("class", "labels")
                .selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .attr("dx", function(d, i) {
                    return (i * 70) + 42
                })
                .attr("dy", svg_h / 2 + 5)
                .text(function(d) {
                    return d;
                });

nodeクラスはcircle要素に対して個別に定義したカスタムCSSクラスですが、クラスnodesおよびlabelsは明示的に定義されておらず、借用されていますこれから answer 。

ご覧のとおり、各テキストラベルの位置はハードコーディングされているため、各ノードの中央に表示されます。明らかに、これは正しい解決策ではありません。

私の質問は、各テキストラベルを各ノードサークルに動的に正しく関連付けて、ラベルの配置がサークルの配置とともに自動的に変更されるようにする方法です。コード例を使用して概念的な説明を歓迎します。

javascriptsvgd3.js
54
skyork

text-anchor 属性は、D3によって作成されたsvg要素で期待どおりに機能します。ただし、textとcircleが共通であることを確認するには、gとtextを共通のcircle要素に追加する必要があります。互いに集中します。

これを行うには、nodes変数を次のように変更します。

var nodes = svg.append("g")
           .attr("class", "nodes")
           .selectAll("circle")
           .data(dataset)
           .enter()
           // Add one g element for each data node here.
           .append("g")
           // Position the g element like the circle element used to be.
           .attr("transform", function(d, i) {
             // Set d.x and d.y here so that other elements can use it. d is 
             // expected to be an object here.
             d.x = i * 70 + 50,
             d.y = svg_h / 2;
             return "translate(" + d.x + "," + d.y + ")"; 
           });

datasetはオブジェクトのリストであるため、d.yおよびd.xは、単なる文字列のリストの代わりに使用できます。

次に、circleおよびtext追加コードを次のコードに置き換えます。

// Add a circle element to the previously added g element.
nodes.append("circle")
      .attr("class", "node")
      .attr("r", 20);

// Add a text element to the previously added g element.
nodes.append("text")
     .attr("text-anchor", "middle")
     .text(function(d) {
       return d.name;
      });

ここで、circleの位置を変更する代わりに、gとcircleの両方を移動するtext要素の位置を変更します。

JSFiddle は、円の中央にテキストを表示しています。

常に最上部に表示されるように、テキストを別のg要素に配置する場合は、d.xおよびd.y値は、最初のg要素の作成でtransformテキストに設定されます。

var text = svg.append("svg:g").selectAll("g")
         .data(force.nodes())
         .enter().append("svg:g");

text.append("svg:text")
    .attr("text-anchor", "middle")
    .text(function(d) { return d.name; });

text.attr("transform",  function(d) {
      return "translate(" + d.x + "," + d.y + ")"; 
    });
63
Brant Olsen

ベストアンサー アスカーから来た 彼自身：

さらなる観察：各テキスト要素の.attr（ "text-anchor"、 "middle"）のみで、ラベルは水平方向の中央にありますが、垂直方向にわずかにずれています。 attr（ "y"、 ".3em"）（d3.jsウェブサイトの例から借用）を追加することでこれを修正しました。これは、ノードサークルのサイズが任意であってもうまくいくようです。ただし、この追加の属性が正確に何をするかは、私の理解を妨げます。確かに、各テキスト要素のy座標に対して何かを行いますが、なぜ.3emなのでしょうか？私にはほとんど魔法のようです...

.attr("text-anchor", "middle")を各テキスト要素に追加するだけです。

例：

node.append("text")
    .attr("x", 0)
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) { return d.name; });
31
tacone

このページ svgフードの下で何が起こっているかを説明します テキスト要素に関しては。基礎となる機械とデータ構造を理解することは、コードを機能させるためにどのようにコードを修正しなければならないかをよりよく理解するのに役立ちました。

4
MichaelGreene