|
|
|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>D3 test</title> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> |
|
<style type="text/css"> |
|
|
|
|
|
body{margin:10px;} |
|
|
|
circle { |
|
fill:#ccc; |
|
stroke:#000; |
|
pointer-events:none; |
|
} |
|
#button {position:absolute;top:10px;left:400px;} |
|
#title {position:absolute;top:12px;left:0px;width:500px;text-align:center;} |
|
.btn { display:inline-block;*display:inline;/* IE7 inline-block hack */ *zoom:1;padding:4px 10px 4px;margin-bottom:0;font-size:13px;line-height:18px;color:#333333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#ffffff,#e6e6e6);background-image:-ms-linear-gradient(top,#ffffff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#ffffff,#e6e6e6);background-image:-o-linear-gradient(top,#ffffff,#e6e6e6);background-image:linear-gradient(top,#ffffff,#e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:dximagetransform.microsoft.gradient(enabled=false);border:1px solid #cccccc;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);cursor:pointer;*margin-left:.3em;} .btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] { background-color:#e6e6e6;} .btn:active,.btn.active { background-color:#cccccc \9;} .btn:first-child { *margin-left:0;} .btn:hover { color:#333333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-ms-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;} .btn:focus { outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} .btn.active,.btn:active { background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);background-color:#e6e6e6;background-color:#d9d9d9 \9;outline:0;} .btn.disabled,.btn[disabled] { cursor:default;background-image:none;background-color:#e6e6e6;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn-mini { padding:2px 6px;font-size:11px;line-height:14px;} |
|
|
|
} |
|
svg {border:1px solid black;} |
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: black; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.axis text { |
|
font-family: sans-serif; |
|
font-size: 13px; |
|
} |
|
|
|
</style> |
|
<script src="http://d3js.org/d3.v2.min.js?2.8.1"></script> |
|
<div id="chart" style="width:500px;height:250px"> |
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="200"> |
|
</svg> |
|
<div id="title">Movement</div> |
|
<button class="btn btn-mini" id="button">Transition</button> |
|
</div> |
|
</head> |
|
<body> |
|
<script> |
|
var w = 500; |
|
var h = 300; |
|
var padding = 35; |
|
var dataset = []; |
|
var numDataPoints = 50; |
|
var xRange = Math.random() * 1000; |
|
var yRange = Math.random() * 1000; |
|
for (var i = 0; i < numDataPoints; i++) { |
|
var newNumber1 = Math.round(Math.random() * xRange); |
|
var newNumber2 = Math.round(Math.random() * yRange); |
|
dataset.push([newNumber1, newNumber2]); |
|
} |
|
var xScale = d3.scale.linear() |
|
.domain([0, d3.max(dataset, function(d) { return d[0]; })]) |
|
.range([padding, w - padding * 2]); |
|
|
|
var yScale = d3.scale.linear() |
|
.domain([0, d3.max(dataset, function(d) { return d[1]; })]) |
|
.range([h - padding, padding]); |
|
|
|
var rScale = d3.scale.linear() |
|
.domain([0, d3.max(dataset, function(d) { return d[1]; })]) |
|
.range([2, 5]); |
|
|
|
var xAxis = d3.svg.axis() |
|
.scale(xScale) |
|
.orient("bottom") |
|
.ticks(5); |
|
|
|
var yAxis = d3.svg.axis() |
|
.scale(yScale) |
|
.orient("left") |
|
.ticks(5); |
|
|
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
svg.selectAll("circle") |
|
.data(dataset) |
|
.enter() |
|
.append("circle") |
|
.attr("cx", function(d) { |
|
return xScale(d[0]); |
|
}) |
|
.attr("cy", function(d) { |
|
return yScale(d[1]); |
|
}) |
|
.attr("r", function(d) { |
|
return rScale(d[1]); |
|
}); |
|
|
|
svg.append("g") |
|
.attr("class", "axis") |
|
.attr("transform", "translate(0," + (h - padding) + ")") |
|
.call(xAxis); |
|
|
|
svg.append("g") |
|
.attr("class", "axis") |
|
.attr("transform", "translate(" + padding + ",0)") |
|
.call(yAxis); |
|
|
|
</script> |
|
|
|
<script> |
|
data={ |
|
title:"Transformation (line chart)", |
|
shapes:[ |
|
{ |
|
type:"path", |
|
init:{ |
|
attr:{ |
|
"d":"m 0,120 L 20,110 L 40,170 L 60,190 L 80,180 L 100,160 L 120,165 L 140,140 L 160,120 L 180,130 L 200,150 L 220,130 L 240,120 L 260,110 L 280,90 L 300,80 L 320,85 L 340,100 L 360,90 L 380,80 L 400,70 L 420,50 L 440,45 L 460,50 L 500,40", |
|
}, |
|
style:{stroke:"blue","stroke-width":2,fill:"none"} |
|
}, |
|
transition:{ |
|
attr:{ |
|
"d":"m 0,120 L 20,105 L 40,100 L 60,95 L 80,100 L 100,105 L 120,100 L 140,90 L 160,85 L 180,80 L 200,60 L 220,70 L 240,80 L 260,100 L 280,110 L 300,150 L 320,130 L 340,125 L 360,120 L 380,130 L 400,140 L 420,170 L 440,150 L 460,160 L 500,180" |
|
} |
|
} |
|
} |
|
]}; |
|
var svg=d3.select("svg"); |
|
svg.selectAll(".vline").data(d3.range(26)).enter() |
|
.append("line") |
|
.attr("x1",function(d){return d*20;}) |
|
.attr("x2",function(d){return d*20;}) |
|
.attr("y1",function(d){return 40;}) |
|
.attr("y2",function(d){return 250;}) |
|
.style("stroke","#eee"); |
|
svg.selectAll(".vline").data(d3.range(2,13)).enter() |
|
.append("line") |
|
.attr("y1",function(d){return d*20;}) |
|
.attr("y2",function(d){return d*20;}) |
|
.attr("x1",function(d){return 0;}) |
|
.attr("x2",function(d){return 500;}) |
|
.style("stroke","#eee"); |
|
|
|
var button=d3.select("#button"); |
|
if (data.button==="none") {button.remove();} |
|
var mode=0; |
|
var modes=[{state:"init",title:"Transition"},{state:"transition",title:"Reset"}]; |
|
|
|
d3.select("#title").html(data.title); |
|
data.shapes.forEach(function(d,i) { |
|
var myshape=svg.append(d.type).attr("id","s"+i); |
|
var state=d.init; |
|
set(myshape,state); |
|
}) |
|
button.on("click",function() { |
|
mode=1-mode; |
|
button.html(modes[mode].title); |
|
data.shapes.forEach(change) |
|
}); |
|
|
|
function change(d,i){ |
|
var state=d[modes[mode].state]; |
|
var myshape=svg.select("#s"+i).transition().duration(state.duration||1000).delay(state.delay||0).ease(state.ease||"cubic-in-out"); |
|
set(myshape,state); |
|
|
|
} |
|
|
|
function set(selection,state,createTransition) { |
|
if(state.remove) { |
|
selection.remove();return; |
|
} |
|
|
|
d3.keys(state.attr).forEach(function(a) { |
|
selection.attr(a, state.attr[a]); |
|
}); |
|
if (state.text) { |
|
selection.text(state.text); |
|
}; |
|
d3.keys(state.style).forEach(function(s) { |
|
selection.style(s, state.style[s]); |
|
}); |
|
|
|
if(state.next) { |
|
var next=state.next; |
|
if (next.type) { |
|
selection.each("end",function() { |
|
set(svg.append(next.type),next,true); |
|
}) |
|
} |
|
else { |
|
if(createTransition) { |
|
selection=selection.transition().duration(0); |
|
} |
|
selection.each("end",function() { |
|
set(d3.select(this).transition().duration(next.duration||1000).delay(next.delay||0).ease(state.ease||"cubic-in-out"),next); |
|
}); |
|
} |
|
} |
|
} |
|
</script> |
|
</body> |
|
</html> |