|
<!DOCTYPE html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> |
|
<style> |
|
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; |
|
font-family: Helvetica, sans-serif} |
|
svg { width:100%; height: 50% } |
|
|
|
.inSVGA { |
|
cursor: pointer; /* decoration */ |
|
pointer-events: none; /* let thru all cursor events */ |
|
} |
|
.inSVGB { |
|
cursor: pointer; |
|
} |
|
|
|
.outSVGA { |
|
cursor: pointer; /* decoration */ |
|
pointer-events: none; /* let thru all cursor events */ |
|
width: 700px; |
|
height: 50px; |
|
margin-top: 20px; |
|
margin-left: 100px; |
|
line-height: 50px; |
|
padding-left: 10px; |
|
|
|
} |
|
.outSVGB { |
|
cursor: pointer; |
|
width: 700px; |
|
height: 50px; |
|
margin-top: 50px; |
|
margin-left: 100px; |
|
line-height: 50px; |
|
padding-left: 10px; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<script> |
|
// Feel free to change or delete any of the code you see! |
|
var svg = d3.select("body").append("svg") |
|
var startColor = "#eee"; |
|
var x = 100; |
|
var y = 50; |
|
|
|
svg.append("rect").classed("inSVGA", true) |
|
.attr({x: x, y: y, width: 700, height: 50}) |
|
.style({ |
|
"fill": startColor, |
|
|
|
}) |
|
.on("mouseover", function(d){ |
|
d3.select(this).style("fill", "#111") |
|
d3.select("text.A").style("fill", "#eee") |
|
}) |
|
.on("mouseout", function(d){ |
|
d3.select(this).style("fill", startColor) |
|
d3.select("text.A").style("fill", "#111") |
|
}) |
|
svg.append("text").classed("A", true) |
|
.text("A: <svg><rect></svg>") |
|
.attr({x: x + 10, y: y + 30}) |
|
|
|
svg.append("rect").classed("inSVGB", true) |
|
.attr({x: x, y: y + 100, width: 700, height: 50}) |
|
.style({ |
|
"fill": startColor, |
|
}) |
|
.on("mouseover", function(d){ |
|
d3.select(this).style("fill", "#111") |
|
d3.select("text.B").style("fill", "#eee") |
|
}) |
|
.on("mouseout", function(d){ |
|
d3.select(this).style("fill", startColor) |
|
d3.select("text.B").style("fill", "#111") |
|
}) |
|
svg.append("text").classed("B", true) |
|
.text("B: <svg><rect></svg>") |
|
.attr({x: x + 10, y: y + 130}) |
|
|
|
d3.select("body").append("div").classed("outSVGA", true) |
|
.style({ |
|
"background": startColor, |
|
}) |
|
.on("mouseover", function(d){ |
|
d3.select(this).style("background", "#111") |
|
.style("color", "#eee") |
|
}) |
|
.on("mouseout", function(d){ |
|
d3.select(this).style("background", startColor) |
|
.style("color", "#111") |
|
}).text("A: <div></div>") |
|
|
|
d3.select("body").append("div").classed("outSVGB", true) |
|
.style({ |
|
"background": startColor, |
|
}) |
|
.on("mouseover", function(d){ |
|
d3.select(this).style("background", "#111") |
|
.style("color", "#eee") |
|
}) |
|
.on("mouseout", function(d){ |
|
d3.select(this).style("background", startColor) |
|
.style("color", "#111") |
|
}).text("B: <div></div>") |
|
|
|
console.log("you are now rocking with d3", d3); |
|
</script> |
|
</body> |