Old school D3 from simpler times

All examples By author By category About

shimizu

Full window Github gist

bring to top

svg 要素の「z-index効かない問題」に対する解決策の一つ

Built with blockbuilder.org

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

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