topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

mobile-data-circle-09.htm / htm


  <script src="http://d3js.org/d3.v3.min.js"></script>
  <link rel="stylesheet" type="text/css" href="mobile-data-circle-style-d3.css">
  <script type="text/javascript">

data


    var data = [32, 57, 112],
        dataEnter = data.concat(293),
        dataExit = data.slice(0, 2),
        w = 360,
        h = 180,
        x = d3.scale.ordinal().domain([57, 32, 112]).rangePoints([0, w], 1),
        y = d3.scale.ordinal().domain(data).rangePoints([0, h], 2);

</script> <p>Taking this to the next logical step, then, what if we have <em>no</em> existing elements? Meaning, what if the document is empty? Say we start with an empty page, and we want to create new circles that correspond to our data? Then we’re joining data to an empty selection, and all of the data ends up in <em>enter</em>:</p> <div class="chart" id="chart-9"> <pre class="code">var enter = circle.enter().append("circle"); enter.attr("cy", 90); enter.attr("cx", function(d) { return d; }); enter.attr("r", function(d) { return Math.sqrt(d); }); </pre> <button>run</button>  </div> <script type="text/javascript">

script


  (function() {
    var svg = d3.select("#chart-9").append("svg")
        .attr("width", w)
        .attr("height", h);

select


    var g = svg.selectAll(".data")
        .data(dataEnter)
      .enter().append("g")
        .attr("class", "data")
        .attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"; });

append


    g.append("circle")
        .attr("class", "little")
        .attr("r", 1e-6);
  
    g.append("rect")
        .attr("x", -10)
        .attr("y", -10)
        .attr("width", 20)
        .attr("height", 20)
        .style("fill", "lightgreen")
        .style("stroke", "green");
  
    g.append("text")
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .text(String);

button


    d3.select("#chart-9 button").on("click", function() {
      g.attr("transform", function(d, i) { return "translate(" + 20 * (i + 1) + ",20)"; });
      g.select("rect").style("opacity", 1);
      g.select("circle").attr("r", 1e-6);

transition


      var t = g.transition().duration(750);
      t.attr("transform", function(d, i) { return "translate(" + d + ",90)"; });
      t.select("circle").attr("r", Math.sqrt);
      t.select("rect").style("opacity", 1e-6);
    });
  })();

</script> <p>This pattern is so common, you’ll often see the <a href="https://github.com/mbostock/d3/wiki/Selections#selectAll">selectAll</a> + <a href="https://github.com/mbostock/d3/wiki/Selections#data">data</a> + <a href="https://github.com/mbostock/d3/wiki/Selections#enter">enter</a> + <a href="https://github.com/mbostock/d3/wiki/Selections#append">append</a> operators called sequentially, one immediately after the other. Despite it being common, keep in mind that this is just one special case of a data join; we’ve already seen another common case (selecting elements for update) and we’ll see other interesting cases to consider in a bit.</p>

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.