yasu47b/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Excercise for d3.js v4
block https://bl.ocks.org/yasu47b/735ba2dbb7b243de36b3a8492ca6c003

  
## index.html
<!doctype html>
<html>
  <head>
	  <link rel="stylesheet" href="main.css" type="text/css">
	  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script></head>
  <body>
	  <script src="main.js"></script>
  </body>
</html>

## main.css
svg {
width: 100%;
}

## main.js
var data = [10, 20, 30, 40];

var svg = d3.select("body").append('div')
.classed('circles', true)
.append("svg")

var circles = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cy', 100)
.attr('cx', function(d){
return d * 10;
})
.attr('r', function(d){ return d})

// change colors
var colors = ['red', 'purple', 'pink', 'yellow', 'blue']
console.log(circles)

function changecolor() {
	circles[0].forEach(function(v,i){
  console.log('change')
  console.log(v,i)
  d3.select(v).attr('fill', colors[i])
  })

}
setTimeout(function() {
}, 2000)

setTimeout(function() {
changeElementColor(d3.selectAll('circle'))
}, 1000)
function changeElementColor(d3Element){
    d3Element
    .transition().duration(0)
      .style("fill", "green")
    .transition().duration(1000)
      .style("fill", "yellow")
    .transition().delay(1000).duration(1000)
      .style("fill", "red");
}
	<!doctype html>
	<html>
	<head>
	<link rel="stylesheet" href="main.css" type="text/css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script></head>
	<body>
	<script src="main.js"></script>
	</body>
	</html>
	var data = [10, 20, 30, 40];

	var svg = d3.select("body").append('div')
	.classed('circles', true)
	.append("svg")

	var circles = svg.selectAll('circle')
	.data(data)
	.enter()
	.append('circle')
	.attr('cy', 100)
	.attr('cx', function(d){
	return d * 10;
	})
	.attr('r', function(d){ return d})

	// change colors
	var colors = ['red', 'purple', 'pink', 'yellow', 'blue']
	console.log(circles)

	function changecolor() {
	circles[0].forEach(function(v,i){
	console.log('change')
	console.log(v,i)
	d3.select(v).attr('fill', colors[i])
	})

	}
	setTimeout(function() {
	}, 2000)

	setTimeout(function() {
	changeElementColor(d3.selectAll('circle'))
	}, 1000)
	function changeElementColor(d3Element){
	d3Element
	.transition().duration(0)
	.style("fill", "green")
	.transition().duration(1000)
	.style("fill", "yellow")
	.transition().delay(1000).duration(1000)
	.style("fill", "red");
	}