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>

我想做的是拥有另一个数组 var 或嵌套数组，并绘制“母亲”值......像这样：

<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];嵌套数组来绘制两者（顶行上的父矩形，底行上的母矩形）？

4

1 回答 1

1

您在<rect>父案例和母案例中都选择了相同的元素。由于您没有在数据绑定中提供键功能，因此键默认为数组索引，这对于母数组和父数组都是相同的。相同的节点加上相同的绑定键意味着您正在使用母数据更新父节点（并且enter()选择将为空）。

如果将“父”类添加到父节点，将“母”类添加到母节点，则可以在选择时将它们分开。例如：

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

另一种选择是将一个键函数传递给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将是第一次调用中的父数组，然后是第二次调用中的母数组，矩形将在相应<g>元素下创建。

于 2013-08-01T05:25:31.833 回答