softend:sx

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
softend:sx [2012/07/02 08:57] – adminsoftend:sx [2019/05/02 17:25] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== Circle ======
 +
 +<html>
 +  <head>
 +    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
 +    <style type="text/css">
 +
 +circle {
 +  fill: #ccc;
 +  fill-opacity: .5;
 +  stroke: #999;
 +}
 +
 +    </style>
 +  </head>
 +  <body>
 +  <div id="clk"></div>
 +  <div id="viz"></div>
 +    <div id="bdy"></div>
 +    <script type="text/javascript">
 +
 +var w = 960,
 +    h = 500,
 +    y = d3.scale.ordinal().domain(d3.range(10)).rangePoints([20, h - 20]),
 +    t = Date.now();
 +
 +var svg = d3.select("#bdy").append("svg:svg")
 +    .attr("width", w)
 +    .attr("height", h);
 +
 +var sampleSVG = d3.select("#viz")
 +        .append("svg")
 +        .attr("width", 100)
 +        .attr("height", 100);    
 +
 +    <div id="sampleSVG"></div>
 +
 +sampleSVG.append("circle")
 +        .style("stroke", "gray")
 +        .style("fill", "white")
 +        .attr("r", 40)
 +        .attr("cx", 50)
 +        .attr("cy", 50)
 +        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
 +        .on("mouseout", function(){d3.select(this).style("fill", "white");});
 +
 +var circle = svg.selectAll("circle")
 +    .data(y.domain())
 +  .enter().append("svg:circle")
 +    .attr("r", 16)
 +    .attr("cx", 20)
 +    .attr("cy", 20)
 +    .each(slide(20, w - 20));
 +
 +function slide(x0, x1) {
 +  t += 50;
 +  return function() {
 +    d3.select(this).transition()
 +        .duration(t - Date.now())
 +        .attr("cx", x1)
 +        .each("end", slide(x1, x0));
 +  };
 +}
 +
 +    </script>
 +  </body>
 +</html>
 +
 +====== Clock ======
 +
 +
 +<html>
 +  <head>
 +    <script type="text/javascript" src="/d3/d3.js?1.27.2"></script>
 +    <style type="text/css">
 +
 +path {
 +  fill-rule: evenodd;
 +  fill: #aaa;
 +  fill-opacity: .7;
 +  stroke: #666;
 +  stroke-width: 1.5px;
 +}
 +
 +    </style>
 + 
 +    <script type="text/javascript">
 +
 +var w = 400,
 +    h = 100,
 +    x = d3.scale.ordinal().domain(d3.range(3)).rangePoints([0, w], 2);
 +
 +var fields = [
 +  {name: "hours", value: 0, size: 24},
 +  {name: "minutes", value: 0, size: 60},
 +  {name: "seconds", value: 0, size: 60}
 +];
 +
 +var arc = d3.svg.arc()
 +    .innerRadius(20)
 +    .outerRadius(40)
 +    .startAngle(0)
 +    .endAngle(function(d) { return (d.value / d.size) * 2 * Math.PI; });
 +
 +var svg = d3.select("#clk").append("svg:svg")
 +    .attr("width", w)
 +    .attr("height", h)
 +  .append("svg:g")
 +    .attr("transform", "translate(0," + (h / 2) + ")");
 +
 +setInterval(function() {
 +  var now = new Date();
 +
 +  fields[0].previous = fields[0].value; fields[0].value = now.getHours();
 +  fields[1].previous = fields[1].value; fields[1].value = now.getMinutes();
 +  fields[2].previous = fields[2].value; fields[2].value = now.getSeconds();
 +
 +  var path = svg.selectAll("path")
 +      .data(fields.filter(function(d) { return d.value; }), function(d) { return d.name; });
 +
 +  path.enter().append("svg:path")
 +      .attr("transform", function(d, i) { return "translate(" + x(i) + ",0)"; })
 +    .transition()
 +      .ease("elastic")
 +      .duration(750)
 +      .attrTween("d", arcTween);
 +
 +  path.transition()
 +      .ease("elastic")
 +      .duration(750)
 +      .attrTween("d", arcTween);
 +
 +  path.exit().transition()
 +      .ease("bounce")
 +      .duration(750)
 +      .attrTween("d", arcTween)
 +      .remove();
 +
 +}, 1000);
 +
 +function arcTween(b) {
 +  var i = d3.interpolate({value: b.previous}, b);
 +  return function(t) {
 +    return arc(i(t));
 +  };
 +}
 +
 +    </script>
 +  </head>
 +</html>
 +
 +===== Timeline =====
 +
 +
 +