Old school D3 from simpler times

All examples By author By category About

sannehombroek

Full window Github gist

updating elements (inspired by d3indepth)

Built with blockbuilder.org

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js