D3 Examples - combinator

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    div {display:inline-block; padding-left:30}
  </style>
</head>
​
<body>
  <div><img src="https://openclipart.org/download/181315/1375181451.svg" width="50" /><img src="https://openclipart.org/download/13664/ericlemerdy-laptop-1.svg" width="50" /></div>
<div><img src="https://openclipart.org/download/181315/1375181451.svg" width="50" /><img src="https://openclipart.org/download/13664/ericlemerdy-laptop-1.svg" width="50" /></div>
  <form>
<!-- <img src="https://openclipart.org/download/181315/1375181451.svg" /><img src="https://openclipart.org/download/13664/ericlemerdy-laptop-1.svg" /> -->
​
    <p>Monitores: <input id="monitores"> &nbsp; Notebooks: <input id="laptops"> &nbsp; Desktops: <input id="desktops"></p>
  </form>
  <script>
    var data = {
            monitors: 5,
            laptops: 3,
            desktops: 4
        }
​
    var laptops = {
        nodes:d3.range(0, 5)
                        .map(function(d){ return {id: d}})
        }
​
    var divMonitores = d3.select("body").append("div")
    
    var divLaptops = d3.select("body").append("div")
    
    draw();
    
    function draw() {
      
      killAll(divMonitores);
      killAll(divLaptops);
      
      divMonitores.selectAll("img")
        .data(d3.range(0, data.monitors))
        .enter()
        .append("img")
        .attr("src", "https://openclipart.org/download/181315/1375181451.svg")
        .attr("width", 80);
      
      divLaptops.selectAll("img")
        .data(d3.range(0, data.laptops))
        .enter()
        .append("img")
        .attr("src", "https://openclipart.org/download/13664/ericlemerdy-laptop-1.svg")
        .attr("width", 80);
    }
​
    function killAll(div) {
       div.selectAll("img").data(new Array()).exit().remove();
    }
    
   d3.select("#monitores").on("input", function() {
          //console.log(+this.value);
                data.monitors = + this.value;
                draw();
     });    
​
   d3.select("#laptops").on("input", function() {
          //console.log(+this.value);
                data.laptops = + this.value;
                draw();
     });    
​
  </script>
</body>
​
    