16

私は何日もこの問題に悩まされてきました。

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

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

次のコードは、4 つのメトリック名をグリッド パターンで表示します (meshy、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");

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

4

1 に答える 1

42

コードの 2 番目のブロックでは、要素を 1 つだけ追加しているtextため、そのうちの 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 スタイルを指定することもできます。

于 2013-07-01T17:27:21.593 に答える