shimizu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    svg 要素の「z-index効かない問題」に対する解決策の一つ
Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>bring to top</title>

<style>
html, body, svg {
    width: 100%;
    height: 100%;
}
</style>

</head>

<body>
<svg></svg>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
<script>
!(function(){
    "use strict";

    var svg = d3.select("svg");
    var width = svg.node().clientWidth;
    var height = svg.node().clientHeight;

    var plotLayer = svg.append("g").classed("plotlayer", true);
    var overlay = svg.append("g").classed("overlay", true);


    var data = d3.range(100).map(function(d){
        return {x:~~(Math.random()*width), y:~~(Math.random()*height)}
    });

    var indexScale = d3.scaleLinear().domain([0, 99]).range([0, 1]);

    var copyOverlay = copy(overlay);
    var clearOverlay = clear(overlay);


    plotLayer
        .selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .classed("elemnt", true)
        .attr("x", function(d){ return d.x })
        .attr("y", function(d){ return d.y })
        .attr("width", 150)
        .attr("height", 75)
        .attr("stroke", "blue")
        .attr("fill", function(d,i){ return d3.interpolateRainbow(indexScale(i)) })
        .on("mouseover.clear", clearOverlay)
        .on("mouseover.overlay", copyOverlay)
        ;


    function copy(layer){
        return function(){
            var node = d3.select(this).node();
            var nodeName = node.nodeName;
            var nodeAttr = node.attributes;
            var data = d3.select(this).data();


            layer.append(nodeName).call((selection) => {
                selection.data(data) // data bind
                Object.keys(nodeAttr).forEach((key) => {
                  selection.attr([nodeAttr[key].name], nodeAttr[key].value)
                });
            })
        }
    }

    function clear(target) {
        return function(){
            target.html(null);
        }
    }

}());
</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title>bring to top</title>

	<style>
	html, body, svg {
	width: 100%;
	height: 100%;
	}
	</style>

	</head>

	<body>
	<svg></svg>

	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
	<script>
	!(function(){
	"use strict";

	var svg = d3.select("svg");
	var width = svg.node().clientWidth;
	var height = svg.node().clientHeight;

	var plotLayer = svg.append("g").classed("plotlayer", true);
	var overlay = svg.append("g").classed("overlay", true);


	var data = d3.range(100).map(function(d){
	return {x:~~(Math.random()width), y:~~(Math.random()height)}
	});

	var indexScale = d3.scaleLinear().domain([0, 99]).range([0, 1]);

	var copyOverlay = copy(overlay);
	var clearOverlay = clear(overlay);



	plotLayer
	.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.classed("elemnt", true)
	.attr("x", function(d){ return d.x })
	.attr("y", function(d){ return d.y })
	.attr("width", 150)
	.attr("height", 75)
	.attr("stroke", "blue")
	.attr("fill", function(d,i){ return d3.interpolateRainbow(indexScale(i)) })
	.on("mouseover.clear", clearOverlay)
	.on("mouseover.overlay", copyOverlay)
	;



	function copy(layer){
	return function(){
	var node = d3.select(this).node();
	var nodeName = node.nodeName;
	var nodeAttr = node.attributes;
	var data = d3.select(this).data();


	layer.append(nodeName).call((selection) => {
	selection.data(data) // data bind
	Object.keys(nodeAttr).forEach((key) => {
	selection.attr([nodeAttr[key].name], nodeAttr[key].value)
	});
	})
	}
	}

	function clear(target) {
	return function(){
	target.html(null);
	}
	}

	}());
	</script>
	</body>
	</html>