3

次のデータに基づいて、一連の円とテキスト フィールドを生成しました。以下のコードを参照してください。

var data = [{"x":534.720996869109,"y":188.402300350323,"label":"ATP","size":5},
{"x":526.793135268385,"y":494.495864118909,"label":"PK","size":10},
{"x":539.854817710164,"y":332.435549874068,"label":"rpoA","size":10},
{"x":528.357841173126,"y":236.960433131191,"label":"rpoB","size":10}]

var width = 1000,height = 1000;

var x = d3.scale.linear()
       .domain([0, 1000])
       .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 1000])
    .range([0, height]);

var svgContainer = d3.select("body")
.append("svg:svg")
.attr("width", width)
.attr("height",height);

//text
var text = svgContainer.selectAll("text")
        .data(data)
        .enter()
        .append("text");

var textbAttributes =   text
.attr("x", 800)
.attr("y", 100)
.text(function(d) { return ''})
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill","black");

//circles
var nodesGroup = svgContainer.append("g");

var nodes = nodesGroup.selectAll("circle")
.data(data)
.enter()
.append("svg:circle");

var nodeattr = nodes
.attr("cy", function(d,i){return y(d.y);  })
.attr("cx", function(d,i){return x(d.x); }) 
.on("click", function(){
    d3.select("text")
    .text(function(d,i){return d.label;})
    })
.attr("r", function(d,i){return d.size;});

円をクリックすると、svgテキスト要素「テキスト」の対応するデータ要素「ラベル」でテキストフィールドを更新できるようにしたいと思います。ただし、上記のコードは、クリックした円に関係なく、最初のラベル要素のみを返します。すべての助けに感謝します。ありがとう！

4

1 に答える 1

7

テキスト要素で何をしようとしているのか完全にはわかりません.すべてのデータ項目に対してテキスト要素を作成し、すべて同じ座標で互いに重ねています。

私の推測では、クリックされた円のラベルを表示する 1 つのテキスト要素が必要ですか? この場合、テキスト要素の作成を 1 つの要素だけに変更できます。

//text  
var text = svgContainer.append("text")
    .attr("x", 800)
    .attr("y", 100)
    .text('')
    .attr("font-family", "sans-serif")
    .attr("font-size", "20px")
    .attr("fill","black");

また、円のクリック ハンドラーを次のように変更できます。

.on("click", function(d){d3.select("text").text(d.label);})

ここでの実例http://jsfiddle.net/yyESt/

これはあなたがやろうとしていることですか？

于 2013-02-18T04:48:23.563 に答える