0

d3 を理解しようとしているときに、行を見ました.text(String);。String がどうあるべきか理解できませんでした。おそらく空の文字列（いいえ）、メソッド（APIリファレンスには表示されませんでした）であると考え、他に何ができるかを考えました。

以下でコメントアウトし、期待どおりの結果を得ました。私が理解していないのは、文字列とは何か、なぜそれが機能するのかです。この行では、3 つの正方形のボックスにテキスト (後で表すデータの内部値) がありますが、コメントアウトされていません。

デモ

HTML

<div class='chart' id='chart-10'/>
<script src="http://d3js.org/d3.v3.min.js"></script>

JS:

    var w = 360;
    var h = 180;
  var svg = d3.select("#chart-10").append("svg")
      .attr("width", w)
      .attr("height", h);

  var g = svg.selectAll(".data")
      .data([50,150,250])
    .enter().append("g")
      .attr("class", "data")
      .attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"; });

  g.append("circle")
      .attr("class", "little")
      .attr("r", 1e-6);

  g.append("rect")
      .attr("x", -10)
      .attr("y", -10)
      .attr("width", 20)
      .attr("height", 20)
      .style("fill", "lightgreen")
      .style("stroke", "green");

  g.append("text")
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
;//      .text(String);


    g.attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"; });
    g.select("rect").style("opacity", 1);
    g.select("circle").attr("r", 1e-6);

    var t = g.transition().duration(750);
    t.attr("transform", function(d, i) { return "translate(" + d + ",90)"; });
    t.select("circle").attr("r", Math.sqrt);
    t.select("rect").style("opacity", 1e-6);
4

1 に答える 1

2

Stringコンストラクタのように見えます。マットが指摘したように、d3のドキュメントによると：

value が関数の場合、関数は選択された要素ごとに (順番に) 評価され、現在のデータムdと現在の indexが渡さiれ、 this コンテキストが現在の DOM 要素として使用されます。次に、関数の戻り値を使用して、各要素のテキスト コンテンツを設定します。

したがって、数行前に設定g.dataします。[50,150,250]各数値はStringコンストラクターによって String オブジェクトに変換され、DOM ノードのテキスト値として返されて使用されます。

于 2013-01-09T14:41:17.250 に答える