0

我想画三个不同颜色的连续正方形（没问题，它在“比例”变量中）并在每个大颜色下面放置可变数量的小正方形（我不能这样做，“点”变量） . 我究竟做错了什么？这是我的代码，要点https://gist.github.com/3013836：

var data = [-1,0,1]

var rect_size = 25; //px

var x = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, rect_size*data.length]);
var color = d3.scale.linear().domain([-1.5, 0, 1.5]).range(["#278DD6","#ffffff","#d62728"]).clamp(false);

var svg = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 200)

scale = svg.selectAll("rect")
    .data(data)
  .enter().append("rect")
    .attr("x", function(d,i) { return x(i); })
    .attr("y",0)
    .attr("width", rect_size)
    .attr("height", rect_size)
    .style("fill", function(d) { return color(d); });

dots = [[1,2,3],[1,2],[1,2,3,4]]
var y = d3.scale.ordinal().domain(d3.range(dots.length)).rangeBands([0, (rect_size/2)*dots.length]);
scale.selectAll("g")
    .data(dots, function(d){return d;})
  .enter().append("rect")
    .attr("x", function(d,i) {return x(i);})
    .attr("y", function(d,i) {return y(i);})
    .attr("width", rect_size/2)
    .attr("height", rect_size/2)
    .style("fill", "black");
4

1 回答 1

1

您已将选择定义scale为三个矩形元素。然后，您在其中的每一个中添加了另外三个 rect 元素。如果您使用浏览器的元素检查器，生成的结构将如下所示：

<rect class="outer">
  <rect class="inner"></rect>
  <rect class="inner"></rect>
  <rect class="inner"></rect>
</rect>

这只显示三个矩形，因为矩形不是SVG 中的容器元素；内部矩形被忽略。

如果要对元素进行分组，则需要一个g（组）元素。你想要这样的结构：

<g>
  <rect class="outer"></rect>
  <rect class="inner"></rect>
  <rect class="inner"></rect>
  <rect class="inner"></rect>
</g>

您可以通过首先使用data-join创建一组 g 元素来做到这一点。然后将单个外部矩形附加到 g 元素。最后使用嵌套连接来创建内部矩形。就像是：

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

var outerRect = g.append("rect")
    .attr("class", "outer");

var innerRect = g.selectAll(".inner")
    .data(innerData)
  .enter().append("rect")
    .attr("class", "inner");

其他几件事：

  • 您可以对 g 元素使用变换，这样您就不必分别定位外部和内部矩形。这样，内部矩形可以相对于外部矩形定位，并且代码更简单。

  • 您的最后一次连接被破坏，因为您选择“g”并附加“rect”；您附加的任何内容都应与您的选择器匹配。

  • 除非您还处理更新和退出，否则您通常不需要数据连接的关键功能。由于您只在联接中处理输入，并且您知道选择为空，因此不需要 key 功能。

于 2012-06-29T06:19:43.143 回答