1

参加とネストに関するD3JSに関するチュートリアルをいくつかチェックしていますが、次の問題を解決できません。http：//bl.ocks.org/4061961のような例もチェックしていましたが、すべての間に解決策が見つかりません。魔法。

したがって、要素の配列があります。この配列を使用すると、要素ごとに「g」ラベルを作成でき、要素ごとに「テキスト」ラベルを作成できますが、「テキスト」ラベルを内部に配置することはできません。 「g」ラベル。

だから私がDOMで取得するのはこれです：HTML-> BODY-> SVG-> G HTML-> BODY-> SVG-> TEXT

そして私が好きになるのはこれです：HTML-> BODY-> SVG-> G-> TEXT

私の小さなテストコードはこれです：

data = ["1", "2", "3", "4", "5"];

// Grups de selecció
svg.selectAll("svg_group")
  .data(data)
  .enter()
  .append("g")
  .attr("class", 'svg_group');

// Text dels dies / anys
svg.selectAll("g .svg_group")
  .data(data)
  .enter()
  .append("text")
  .text( function(d) { return d; } );

助けていただければ幸いです。前もって感謝します。

更新16:08

グループに複数の要素を追加する必要があり、可能であれば2つのステップで追加する必要があります。今、私はこれをDOMに持っています：

  <svg id="gantt" width="500" height="500">
    <g class="svg_group">
    <g class="svg_group">
    <g class="svg_group">
    <g class="svg_group">
    <g class="svg_group">
    <text>1</text>
    <text>2</text>
    <text>3</text>
    <text>4</text>
    <text>5</text>
    <line>1</line>
    <line>2</line>
    <line>3</line>
    <line>4</line>
    <line>5</line>  
  </svg>

そして、私はこのようなものが好きです：

  <svg id="gantt" width="500" height="500">
    <g class="svg_group">
      <text>1</text>
      <line>1</line>
    </g>
    <g class="svg_group">
      <text>2</text>
      <line>2</line>
    </g>
    <g class="svg_group">
      <text>3</text>
      <line>3</line>
    </g>
    <g class="svg_group">
      <text>4</text>
      <line>4</line>
    </g>
    <g class="svg_group">
      <text>5</text>
      <line>5</line>
    </g>
  </svg>

例： http： //jsfiddle.net/y394h/10/

4

1 に答える 1

3

これはどう？

svg.selectAll("svg_group")
  .data(data)
  .enter()
  .append("g")
  .attr("class", 'svg_group')
  .append("text")
  .text( function(d) { return d; } );

また

var group = svg.selectAll("svg_group")
  .data(data)
  .enter()
  .append("g")
  .attr("class", 'svg_group');

group.append("text")
  .text( function(d) { return d; } );
于 2013-01-18T09:28:26.733 に答える