xmanemran/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!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; }
  </style>
</head>

<body>
  <script>
    console.clear();
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

    var data = Array(5).fill('x').map(x=>Math.random()*100);
    console.log(data)

    svg.selectAll('rect')
    	.data(data)
    	.enter()
    	.append('rect')
    	.attr('class', 'max')
    	.attr('x', (d, i)=> i * 50 + 50)
    	.attr('y', 50)
    	.attr('width', 40)
    	.attr('height', (d) => d)
    	.attr('fill', 'green')

//     append();
    exit();


    function exit(){
//       console.log(this.data.splice(1, 2));
   		var no = this.data.splice(1, 2)
      console.log(no)
      setTimeout(function(){
        svg.selectAll('rect')
        	.data(no)
        	.exit()
        	.remove()

        update();
      }, 3000)
    }


    function append(){
      setTimeout(function(){
        console.log('append')

        data = Array(8).fill('x').map(x=>Math.random()*100);
        var max  = svg.selectAll('rect')
        	.data(data)
          .enter()
          .append('rect')
        	.transition()
        	.duration(200)
          .attr('height', (d) => d)
          .attr('x', (d, i)=> i * 50 + 50)
          .attr('y', 50)
          .attr('width', 40)
          .attr('height', (d) => d)
					.attr('fill', 'red')
        update()
      }, 1000);
    }


    function update(){
       setTimeout(function(){
       		console.log('update')

          var data = svg.selectAll('.max')
            .data(this.data)
            .transition()
            .duration(500)
            .attr('height', (d) => d)
        })

    }


//     console.log(svg.nodes());
//     console.log(svg.data());

//     svg.append('rect')
//     	.attr('x', 200)
//       .attr('y', 200)
//     	.attr('height', 200)
//     	.attr('width', 200)

  </script>
</body>
	<!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; }
	</style>
	</head>

	<body>
	<script>
	console.clear();
	// Feel free to change or delete any of the code you see in this editor!
	var svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 500)

	var data = Array(5).fill('x').map(x=>Math.random()*100);
	console.log(data)

	svg.selectAll('rect')
	.data(data)
	.enter()
	.append('rect')
	.attr('class', 'max')
	.attr('x', (d, i)=> i * 50 + 50)
	.attr('y', 50)
	.attr('width', 40)
	.attr('height', (d) => d)
	.attr('fill', 'green')

	// append();
	exit();



	function exit(){
	// console.log(this.data.splice(1, 2));
	var no = this.data.splice(1, 2)
	console.log(no)
	setTimeout(function(){
	svg.selectAll('rect')
	.data(no)
	.exit()
	.remove()

	update();
	}, 3000)
	}


	function append(){
	setTimeout(function(){
	console.log('append')

	data = Array(8).fill('x').map(x=>Math.random()*100);
	var max = svg.selectAll('rect')
	.data(data)
	.enter()
	.append('rect')
	.transition()
	.duration(200)
	.attr('height', (d) => d)
	.attr('x', (d, i)=> i * 50 + 50)
	.attr('y', 50)
	.attr('width', 40)
	.attr('height', (d) => d)
	.attr('fill', 'red')
	update()
	}, 1000);
	}




	function update(){
	setTimeout(function(){
	console.log('update')

	var data = svg.selectAll('.max')
	.data(this.data)
	.transition()
	.duration(500)
	.attr('height', (d) => d)
	})

	}






	// console.log(svg.nodes());
	// console.log(svg.data());

	// svg.append('rect')
	// .attr('x', 200)
	// .attr('y', 200)
	// .attr('height', 200)
	// .attr('width', 200)

	</script>
	</body>