All examples By author By category About

mbostock

Full window Github gist

How selectAll Works

This animation demonstrates how selection.selectAll works: every element in the old selection becomes a group in the new selection. Here, an initial selection of table rows is then used to create a selection of table cells:

d3.selectAll("tr").selectAll("td");

The result is a selection of table cells (td elements) grouped by their table row.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node text {
  font: 10px sans-serif;
}

.join,
.link,
.node rect {
  fill: none;
  stroke: #636363;
  stroke-width: 1.5px;
}

.right text {
  text-anchor: end;
}

.node rect {
  fill: white;
}

.link path,
.node rect,
.node text {
  -webkit-transition: fill-opacity 500ms linear, stroke-opacity 500ms linear, stroke 500ms linear, fill 500ms linear;
  -moz-transition: fill-opacity 500ms linear, stroke-opacity 500ms linear, stroke 500ms linear, fill 500ms linear;
  -ms-transition: fill-opacity 500ms linear, stroke-opacity 500ms linear, stroke 500ms linear, fill 500ms linear;
  -o-transition: fill-opacity 500ms linear, stroke-opacity 500ms linear, stroke 500ms linear, fill 500ms linear;
  transition: fill-opacity 500ms linear, stroke-opacity 500ms linear, stroke 500ms linear, fill 500ms linear;
}

.node .array rect {
  stroke: #636363;
}

.node .element rect {
  fill: #bdbdbd;
  stroke: none;
}

.node .null rect {
  fill: none;
  stroke: none;
}

.node .null text {
  fill: #636363;
}

.node .function rect {
  stroke: #3182bd;
}

.node .selection rect {
  stroke: #e6550d;
}

.node .data rect {
  fill: #d9d9d9;
  stroke: none;
}

.node .code text {
  font-family: monospace;
}

.node .key rect {
  fill: #a1d99b;
  stroke: none;
}

.link .to-data {
  stroke: #ddd;
}

.link .to-element {
  stroke: #bdbdbd;
}

.link .to-key,
.join {
  stroke: #a1d99b;
}

.join {
  stroke-dasharray: 2,2;
}

.link .to-null {
  stroke-opacity: .5;
  stroke-dasharray: .5,3.5;
  stroke-linecap: round;
}

.play circle {
  fill: #fff;
  stroke: #000;
  stroke-width: 3px;
}

.play:hover path {
  fill: red;
}

.play rect {
  fill: none;
  pointer-events: all;
  cursor: pointer;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 0, right: 120, bottom: 0, left: 120},
    width = 720,
    step = 100;

function tree(leftRoot, rightRoot, outerHeight) {
  if (arguments.length < 3) outerHeight = rightRoot, rightRoot = null;

var height = outerHeight - margin.top - margin.bottom;

var tree = d3.layout.tree()
      .size([height, 1])
      .separation(function() { return 1; });

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .style("margin-top", "58px");

node.append("text")
      .attr("x", function(d) { return d.flipped ? -6 : 6; })
      .attr("dy", ".35em")
      .text(function(d) { return d.name; })
      .each(function(d) { d.width = Math.max(32, this.getComputedTextLength() + 12); });

node.filter(function(d) { return "join" in d; }).insert("path", "text")
      .attr("class", "join")
      .attr("d", d3.svg.diagonal()
        .source(function(d) { return {y: d.width, x: 0}; })
        .target(function(d) { return {y: 88, x: d.join * 24}; })
        .projection(function(d) { return [d.y, d.x]; }));

node.insert("rect", "text")
      .attr("ry", 6)
      .attr("rx", 6)
      .attr("y", -10)
      .attr("height", 20)
      .attr("width", function(d) { return d.width; })
    .filter(function(d) { return d.flipped; })
      .attr("x", function(d) { return -d.width; });

function flip(d) {
    d.depth *= -1;
    d.flipped = true;
    return d;
  }

return svg;
}

function treeAnimation(startRoot, startHeight, endRoot, endHeight) {
  var end = tree(endRoot, endHeight).remove(),
      height = +end.attr("height"),
      start = tree(startRoot, startHeight).attr("height", height),
      svg = start.node(),
      offset = (endHeight - startHeight) / 2,
      transform = "translate(" + margin.left + "," + offset + ")";

var play = start.append("g")
      .attr("class", "play");

play.append("circle")
      .attr("r", 45)
      .attr("transform", "translate(" + (margin.left + width / 2) + "," + height / 2 + ")");

play.append("path")
      .attr("d", "M-22,-30l60,30l-60,30z")
      .attr("transform", "translate(" + (margin.left + width / 2) + "," + height / 2 + ")scale(.7)");

play.append("rect")
      .attr("width", width)
      .attr("height", height)
      .on("click", function() { resetAll(); transition1(); });

end = d3.select(svg.appendChild(end.node().firstChild));
  start = d3.select(svg.firstChild).attr("transform", transform);
  end.selectAll(".array").each(function() { this.parentNode.appendChild(this); }); // mask elements

var startNodes = start.datum().nodes,
      startElements = startNodes.filter(function(d) { return d.type === "element"; }),
      endNodes = end.datum().nodes,
      endGroups = endNodes.filter(function(d) { return d.type === "array"; });

resetAll();

function resetAll() {
    start.call(reset).style("display", null);
    end.call(reset).style("display", "none");
    play.style("display", null);
  }

function reset(svg) {
    svg.selectAll(".node g,.link")
        .style("stroke-opacity", null)
        .style("fill-opacity", null);

start.selectAll(".array")
        .attr("class", function(d) { return d.type; })
        .attr("transform", function(d, i) { return "translate(" + d.depth * step + "," + d.x + ")"; })
      .select("rect")
        .attr("width", function(d) { return d.width; });
  }

function transition1() {
    play.style("display", "none");

var t = start.transition()
        .duration(1000 + (startElements.length - 1) * 50)
        .each("end", transition2);

t.selectAll(".selection,.array,.link")
        .duration(0)
        .style("stroke-opacity", 0)
        .style("fill-opacity", 0);

t.selectAll(".element")
        .duration(500)
        .delay(function(d, i) { return 500 + i * 50; })
        .attr("transform", function(d, i) { return "translate(" + (d.depth - 1) * step + "," + (endGroups[i].x - offset) + ")"; })
        .attr("class", "array")
      .select("rect")
        .attr("width", function(d, i) { return endGroups[i].width; });
  }

function transition2() {
    end.style("display", null)
      .selectAll(".element,.to-element")
        .style("display", "none");

end.selectAll(".selection,.to-array,.array")
        .style("stroke-opacity", 0)
        .style("fill-opacity", 0)
      .transition()
        .duration(0)
        .style("stroke-opacity", 1)
        .style("fill-opacity", 1);

end.transition()
        .duration(500)
        .each("end", transition3);
  }

function transition3() {
    start.style("display", "none");

end.selectAll(".element")
        .style("display", null)
        .attr("transform", function(d) { return "translate(" + d.parent.depth * step + "," + d.parent.x + ")"; })
      .transition()
        .duration(500)
        .delay(function(d, i) { return i * 50; })
        .attr("transform", function(d) { return "translate(" + d.depth * step + "," + d.x + ")"; });

end.selectAll(".to-element")
        .style("display", null)
        .attr("d", d3.svg.diagonal()
          .source(function(d) { return {y: d.source.depth * step + d.source.width, x: d.source.x}; })
          .target(function(d, i) { return {y: d.source.depth * step + d.source.width, x: d.source.x}; })
          .projection(function(d) { return [d.y, d.x]; }))
      .transition()
        .duration(500)
        .delay(function(d, i) { return i * 50; })
        .attr("d", d3.svg.diagonal()
          .source(function(d) { return {y: d.source.depth * step + d.source.width, x: d.source.x}; })
          .target(function(d, i) { return {y: d.target.depth * step, x: d.target.x}; })
          .projection(function(d) { return [d.y, d.x]; }));

end.transition()
        .duration(5000)
        .each("end", resetAll);
  }
}

treeAnimation(
  {type: "selection", name: "selection", children: [
    {type: "array", name: "group₀", children: [
      {type: "element", name: "tr₀"},
      {type: "element", name: "tr₁"},
      {type: "element", name: "tr₂"},
      {type: "element", name: "tr₃"}
    ]}
  ]},
  24 * 4,
  {type: "selection", name: "selection", children: [
    {type: "array", name: "group₀", children: [
      {type: "element", name: "td₀"},
      {type: "element", name: "td₁"},
      {type: "element", name: "td₂"},
      {type: "element", name: "td₃"}
    ]},
    {type: "array", name: "group₁", children: [
      {type: "element", name: "td₄"},
      {type: "element", name: "td₅"},
      {type: "element", name: "td₆"},
      {type: "element", name: "td₇"}
    ]},
    {type: "array", name: "group₂", children: [
      {type: "element", name: "td₈"},
      {type: "element", name: "td₉"},
      {type: "element", name: "td₁₀"},
      {type: "element", name: "td₁₁"}
    ]},
    {type: "array", name: "group₃", children: [
      {type: "element", name: "td₁₂"},
      {type: "element", name: "td₁₃"},
      {type: "element", name: "td₁₄"},
      {type: "element", name: "td₁₅"}
    ]}
  ]},
  24 * 16
);

</script>

https://d3js.org/d3.v3.min.js