D3 Examples - updating elements (inspired by d3indepth)

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>Using the i argument</title>
</head>
​
<style>
rect {
    fill: #ddd;
}
circle {
  fill: #ddd;
  cursor: pointer;
 g.item text {
    fill: #ddd;
    font-size: 70px;
    text-anchor: middle;
    font-weight: bold;
}
 
​
</style>
​
<body>
    <svg class='svg1' width="760" height="190">
        <g transform="translate(70, 20)">
            <rect width="30" height="30" y="0" />
            <rect width="30" height="30" y="40" />
            <rect width="30" height="30" y="80" />
            <rect width="30" height="30" y="120" />
        </g>
    </svg>
​
    <div>
        <button onClick="update();">Click to update rect elements using function(d, i)</button>
    <button onClick="reset();">Click to reset</button>
  </div>
​
  <svg class='svg2' width="760" height="140">
    <g transform="translate(70, 70)">
      <circle r="40" />
      <circle r="40" cx="120" />
      <circle r="40" cx="240" />
      <circle r="40" cx="360" />
      <circle r="40" cx="480" />
    </g>
  </svg>
  <div class="status">Click on or mouse over a circle
    <p></p>
        <button onClick="voegtoe();">voeg een circel toe</button>
    <button onClick="voegtoe2();">breng een circel terug</button>
    </div>
  
  <svg class='svg3' width="760" height="140">
        <g transform="translate(70, 70)">
            <g class="item" transform="translate(0, 0)"><circle r="40" /></g>
            <g class="item" transform="translate(120, 0)"><circle r="40" /></g>
            <g class="item" transform="translate(240, 0)"><circle r="40" /></g>
        </g>
    </svg>
  <div> <button onClick="addnumbers();">voeg nummers aan de circels toe!</button>
    <button onClick="removenrs();">haal nummers weer weg </button>
  </div>
​
  <svg class='svg4' width="760" height="140">
    <g transform="translate(70, 70)">
      <g class="item" transform="translate(0, 0)"></g>
      <g class="item" transform="translate(120, 0)"></g>
      <g class="item" transform="translate(240, 0)"></g>
    </g>
  </svg>
  <svg class='svg5' width="760" height="140">
    <g transform="translate(70, 70)">
      <circle r="40" />
      <circle r="40" cx="120" />
      <circle r="40" cx="240" />
      <circle r="40" cx="360" />
      <circle r="40" cx="480" />
      <circle r="40" cx="620" />
    </g>
  </svg>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
    <script>
var rects = d3.selectAll('rect')
var circles=d3.selectAll('circle')  
//update de vierkantjes
function update() 
{
    rects.attr('x', function(d, i) {
            return i * 60;
        });
  rects.attr('y', function(d,i) {return i * 10});
}
function reset()
{ rects.attr('x',0);
 rects.attr('y', function(d,i) {return i*40});
}
//manipuleer de circels
circles.on('mouseover', function(d,i) {
   d3.select(this)
   .style('fill', 'blue')
 }); 
circles.on('mouseleave', function(d,i) {
   d3.select(this)
   .style('fill', '#ddd')
 }); 
 circles.on('click', function(d, i) {
    d3.select(this).remove()
      //.style('fill', 'orange');
  });
  
 
 //voegt een circel toe in vakje twee:
 function voegtoe()
 {d3.selectAll('svg.svg2').append('circle').attr('cy','70').attr('r','40').attr('cx','680');
 }
 function voegtoe2() {d3.selectAll('svg.svg2').append('circle').attr('cx', 600).attr('cy',70).attr('r', '40').style('fill','orange')
                     }
 
 //voeg nummers toe aan de g.item circels
function addnumbers()
    {d3.selectAll('svg.svg3').selectAll('g.item')
    .append('text')
    .text(function(d, i) {
        return i + 1 ;
    }).style('fill','orange').style('font-size','50px')
    .attr('y', 40)
    .attr('x', 30);
    }
function removenrs()
    {d3.selectAll('svg.svg3').selectAll('text')
    .remove('text');}
     
function addNumberedCircle(d, i) {
  d3.select(this)
    .append('circle')
    .attr('r', 50);
  d3.select(this)
    .append('text')
    .text(i + 1)
    .attr('y', 50)
    .attr('x', 50)
    .attr('font-size',50)
    .attr('fill','blue')
  d3.select(this)
    .append('ellipse')
    .attr('rx',25).attr('ry',50)
    .attr('fill','orange');
}
​
d3.selectAll('svg.svg4').selectAll('g.item').each(addNumberedCircle)
​
​
d3.selectAll('svg.svg5').selectAll('circle')
  .each(function (d, i)
        {
            var odd = i % 2 === 1;
                d3.select(this).style('fill', odd ? 'orange':'grey')
        .attr('r', odd ? '40':'20');
                })
​
function addNumberedCircle2(selection) {
  selection
    .append('circle')
    .attr('r', function(d, i) {return i*10})
    .style('fill','blue');
​
  selection
    .append('text')
    .text(function(d, i) {
      return i + 1;
    })
    .attr('y', 50)
    .attr('x', 30)
    .attr('fill','brown')
    .attr('font-size',function(d, i) {return (i+1)*10});
}
​
d3.selectAll('svg.svg4').selectAll('g.item')
  .call(addNumberedCircle2);
</script>
</body>
</html>
    