1

私はd3にかなり慣れていません。私はこれを持っていて、それは動作します:

<script type="text/javascript">

  var w = 620;
  var h = 30;

  var father = [ true, true, false, false, false ];

  //Create SVG element
  var svg = d3.select("#parentsmed")
        .append("svg")
        .attr("height", h)
        .attr("width", w);

  var fatherrects = svg.selectAll("rect")
      .data(father)
      .enter()
      .append("rect");

  fatherrects.attr("x", function(d, i) {
        return (i * 31) + 93;
      })
       .attr("width", 30)
       .attr("height",30)
       .attr("fill", function(d, i) {
        if(father[i] == true) {
          return "#89CFF0";
        } else {
          return "#efefef";
        }
       });

</script>

私がやりたいことは、別の配列変数またはネストされた配列のいずれかを持ち、「母」の値も描画することです...次のようなもの:

<script type="text/javascript">

  var w = 620;
  var h = 30;

  var father = [ true, true, false, false, false ];
  var mother = [ false, true, false, false, true ];

  //Create SVG element
  var svg = d3.select("#parentsmed")
        .append("svg")
        .attr("height", h)
        .attr("width", w);

  var fatherrects = svg.selectAll("rect")
      .data(father)
      .enter()
      .append("rect");

  fatherrects.attr("x", function(d, i) {
        return (i * 31) + 93;
      })
       .attr("width", 30)
       .attr("height",30)
       .attr("fill", function(d, i) {
        if(father[i] == true) {
          return "#89CFF0";
        } else {
          return "#efefef";
        }
       });


  var motherrects = svg.selectAll("rect")
      .data(mother)
      .enter()
      .append("rect");

  motherrects.attr("x", function(d, i) {
        return (i * 31) + 93;
      })
       .attr("y", 31)
       .attr("width", 30)
       .attr("height",30)
       .attr("fill", function(d, i) {
        if(mother[i] == true) {
          return "#89CFF0";
        } else {
          return "#efefef";
        }
       });
</script>

これは を描画しますが、 は描画しfatherrectsませんmotherrects。var data = [father,mother];示されているように、2 つの配列変数を使用するか、単一のネストされた配列を使用して、両方 (一番上の行に父の四角形、一番下の行に母の四角形) を描画するにはどうすればよいですか?

4

1 に答える 1

1

<rect>父と母の両方のケースで同じ要素を選択しています。データバインドでキー関数を提供していないため、キーのデフォルトは配列インデックスに設定されます。これは、親配列と親配列の両方で同じになります。同じノードと同じバインド キーは、親ノードを親データで更新していることを意味します (enter()選択は空になります)。

「父」クラスを父ノードに追加し、「母」クラスを母ノードに追加する場合、それらを別々に選択することができます。例えば：

 var motherrects = svg.selectAll("rect.mother")
    .data(mother)
    .enter()
    .append("rect")
        .attr("class", "mother");

もう 1 つのオプションは、キー関数をdata呼び出しに渡すことですが、これにはキーとして使用できる何かが含まれるようにデータを変更する必要があります。ノードをクラス分けして区別しておく方が簡単で、おそらくより正確です。

さらに別のオプションは、提案した 2D 配列 ( [father, mother]) を使用してから、各サブ配列の四角形を独自にグループ化すること<g>です。

var g = svg.selectAll("g")
    .data(data)
    .enter()
    .append("g");

g.selectAll("rect")
    .data(function(d) { return d; })
    .enter()
    .append("rect");

これは、選択のグループ化構造を利用します。d関数内の値はdata、最初の呼び出しでは親配列になり、2 回目では親配列になり、対応する<g>要素の下に四角形が作成されます。

于 2013-08-01T05:25:31.833 に答える