web-dev-qa-db-ja.com

d3で複数のsvgテキストを追加する

私はこの問題に何日も行き詰っています。

したがって、次の形式のオブジェクトのデータセットがあります。

dataset = [{metric:"revenue",value:0.03},{metric:"sales", value:0.15},{metric:"churn", value: 0.06},{metric:"logins", value: 0.45}]

次のコードは、4つのメトリック名をグリッドパターンで表示します（メッシュ、meshxはグリッドの座標点、meshsizeはグリッドのサイズなので、グリッドの正方形の真ん中にテキストを配置しています）。

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d){
        return d.metric;
    })
    .attr("y",function(d,i){
        return meshy[i] + meshsize/2;
    })
    .attr("x", function(d,i){
        return meshx[i] + meshsize/2;
    })
    .attr("font-size",25)
    .attr("font-family","serif")
    .attr("text-anchor","middle")
    .attr("font-weight","bold");

次に、メトリックの値をメトリック名のすぐ下に配置します。

 svg.append("text")
    .data(dataset)
    .text(function(d){
        return (d.value);
    })
    .attr("y",function(d,i){
        return meshy[i] + meshsize/2 + 20;
    })
    .attr("x", function(d,i){
        return meshx[i] + meshsize/2 ;
    })
    .attr("font-size",25)
    .attr("font-family","serif")
    .attr("text-anchor","middle")
    .attr("font-weight","bold");

ただし、これは最初のメトリックのメトリック名の下にある値のみを返します。他の3つの値のテキストはDOMにもありません。ここで説明されているように、.textを.htmlに置き換えることを含む複数のアプローチを試してみました： https://github.com/mbostock/d3/wiki/Selections#wiki-html 成功しませんでした。私は代わりに段落要素を追加してみました-これは機能しますが、p要素はリストのsvg本体の下に配置され、それらを正しい位置に移動する明白な方法がありません。上記のコードは私が必要なものを取得するのに最も近いものですが、何らかの理由で最初の値のテキストのみが表示されます。しかし、私はd3で仕事を成し遂げるあらゆるアプローチに開放的です：そのすぐ下に値を持つ4つのメトリック名

svgd3.js
15
user1452494

2番目のコードブロックでは、text要素を1つだけ追加しているため、1つだけが表示されています。あなたがする必要があるのは、最初のブロックと同様に、つまり.enter()を選択してテキストを追加することです。これには、2つの選択肢があります。 .enter()セレクションを保存して再利用するか、2種類のテキストに異なるクラスを割り当てて、それらを区別することができます。

オプション1：

var texts = svg.selectAll("text")
                .data(dataset)
                .enter();

texts.append("text")
     .text(function(d){
                    return d.metric;
                })
     // set position etc.

texts.append("text")
     .text(function(d){
                    return d.value;
                })
     // set position etc.

オプション2：

svg.selectAll("text.title")
                .data(dataset)
                .enter()
                .append("text")
                .attr("class", "title")
                .text(function(d){
                    return d.metric;
                })
     // set position etc.

svg.selectAll("text.value")
                .data(dataset)
                .enter()
                .append("text")
                .attr("class", "value")
                .text(function(d){
                    return d.value;
                })
     // set position etc.

最初のオプションは明らかに短いですが、他に何をしたいかによっては、2番目のオプションの方が望ましい場合があります-後でテキストを変更する場合は、2種類のテキストを区別できればはるかに簡単になります。 。さまざまなクラスを使用して、さまざまなCSSスタイルを指定することもできます。

38
Lars Kotthoff