变换

单元素动画

  1. <script type="text/javascript">
  2.     var body = d3.select("body"), 
  3.         duration = 5000;
  5.     body.append("div")
  6.             .classed("box", true)
  7.             .style("background-color", "#e9967a")
  8.         .transition()
  9.         .duration(duration)
  10.             .style("background-color", "#add8e6")
  11.             .style("margin-left", "600px")
  12.             .style("width", "100px")
  13.             .style("height", "100px");
  14. </script>

1.gif

如果没有起始值或者结束值，D3 会自动计算一个值作为过渡的有起始值或者结束值。

多元素动画

  1. <script type="text/javascript">
  2.     var id= 0,
  3.         data = [],
  4.         duration = 500,
  5.         chartHeight = 100,
  6.         chartWidth = 680;
  8.     for(var i = 0; i < 20; i++) push(data);
  10.     function render(data) {
  11.         var selection = d3.select("body")
  12.                 .selectAll("div.v-bar")
  13.                 .data(data, function(d){return d.id;});
  15.         // enter
  16.         selection.enter()
  17.                 .append("div")
  18.                 .attr("class", "v-bar")
  19.                 .style("z-index", "0")
  20.                 .style("position", "fixed")
  21.                 .style("top", chartHeight + "px")
  22.                 .style("left", function(d, i){
  23.                     return barLeft(i+1) + "px";
  24.                 })
  25.                 .style("height", "0px")
  26.                 .append("span");
  28.         // update
  29.         selection
  30.                 .transition().duration(duration)
  31.                 .style("top", function (d) {
  32.                     return chartHeight - barHeight(d) + "px";
  33.                 })
  34.                 .style("left", function(d, i){
  35.                     return barLeft(i) + "px";
  36.                 })
  37.                 .style("height", function (d) {
  38.                     return barHeight(d) + "px";
  39.                 })
  40.                 .select("span")
  41.                 .text(function (d) {return d.value;});
  43.         // exit
  44.         selection.exit()
  45.                 .transition().duration(duration)
  46.                 .style("left", function(d, i){
  47.                     return barLeft(-1) + "px";
  48.                 })
  49.                 .remove();
  50.     }
  52.     function push(data) {
  53.         data.push({
  54.             id: ++id,
  55.             value: Math.round(Math.random() * chartHeight)
  56.         });
  57.     }
  59.     function barLeft(i) {
  60.         return i * (30 + 2);
  61.     }
  63.     function barHeight(d) {
  64.         return d.value;
  65.     }
  67.     setInterval(function () {
  68.         data.shift();
  69.         push(data);
  70.         render(data);
  71.     }, 2000);
  73.     render(data);
  75.     d3.select("body")
  76.        .append("div")
  77.            .attr("class", "baseline")
  78.            .style("position", "fixed")
  79.            .style("z-index", "1")
  80.            .style("top", chartHeight + "px")
  81.            .style("left", "0px")
  82.            .style("width", chartWidth + "px");
  83. </script>

1.gif

缓动动画

  1. <script type="text/javascript">
  2.     var data = [
  3.             {name: 'Linear', fn: d3.easeLinear},
  4.             {name: 'Cubic', fn: d3.easeCubic},
  5.             {name: 'CubicIn', fn: d3.easeCubicIn},
  6.             {name: 'Sin', fn: d3.easeSin},
  7.             {name: 'SinIn', fn: d3.easeSinIn},
  8.             {name: 'Exp', fn: d3.easeExp},
  9.             {name: 'Circle', fn: d3.easeCircle},
  10.             {name: 'Back', fn: d3.easeBack},
  11.             {name: 'Bounce', fn: d3.easeBounce},
  12.             {name: 'Elastic', fn: d3.easeElastic},
  13.             {name: 'Custom', fn: function(t){ return t * t; }}
  14.         ],
  15.         colors = d3.scaleOrdinal(d3.schemeCategory20);
  17.     d3.select("body").selectAll("div")
  18.             .data(data)
  19.         .enter()
  20.         .append("div")
  21.             .attr("class", "fixed-cell")
  22.             .style("top", function (d, i) {
  23.                 return i * 40 + "px";
  24.             })
  25.             .style("background-color", function (d, i) {
  26.                 return colors(i);
  27.             })
  28.             .style("color", "white")
  29.             .style("left", "500px")
  30.             .text(function (d) {
  31.                 return d.name;
  32.             });
  34.     d3.selectAll("div").each(function(d){
  35.         d3.select(this)
  36.                 .transition().ease(d.fn) // <-D
  37.             .duration(1500)
  38.             .style("left", "10px");
  39.     });
  40. </script>

1.gif

使用中间帧计算

  1. <script type="text/javascript">
  2.     var body = d3.select("body"), duration = 5000;
  4.     body.append("div").append("input")
  5.         .attr("type", "button")
  6.         .attr("class", "countdown")
  7.         .attr("value", "0")
  8.         .style("width", "150px")
  9.         .transition().duration(duration).ease(d3.easeLinear)
  10.             .style("width", "400px")
  11.             .attr("value", "9");
  13.     body.append("div").append("input")
  14.         .attr("type", "button")
  15.         .attr("class", "countdown")
  16.         .attr("value", "0")
  17.         .transition().duration(duration).ease(d3.easeLinear)
  18.             .styleTween("width", widthTween)
  19.             .attrTween("value", valueTween);
  22.     function widthTween(a){
  23.         var interpolate = d3.scaleQuantize()
  24.             .domain([0, 1])
  25.             .range([150, 200, 250, 350, 400]);
  27.         return function(t){
  28.             return interpolate(t) + "px";
  29.         };
  30.     }
  32.     function valueTween(){
  33.         var interpolate = d3.scaleQuantize() 
  34.             .domain([0, 1])
  35.             .range([1, 2, 3, 4, 5, 6, 7, 8, 9]);
  37.         return function(t){
  38.             return interpolate(t);
  39.         };
  40.     }        
  41. </script>

1.gif

在 D3 中，tween 函数是一个工厂函数，用来构造执行中间帧的最终函数。

使用级联过渡

  1. <script type="text/javascript">
  2.     var body = d3.select("body");
  4.     function teleport(s){
  5.         s.transition().duration(1000)
  6.             .style("width", "200px")
  7.             .style("height", "1px")
  8.         .transition().duration(500)
  9.             .style("left", "600px")
  10.         .transition().duration(1000)
  11.             .style("left", "800px")
  12.             .style("height", "80px")
  13.             .style("width", "80px");
  14.     }
  16.     body.append("div")    
  17.             .style("position", "fixed")
  18.             .style("background-color", "steelblue")
  19.             .style("left", "10px")
  20.             .style("width", "80px")
  21.             .style("height", "80px")
  22.             .call(teleport);     
  23. </script>

1.gif

使用选择性过渡

  1. <script type="text/javascript">
  2.     var data = ["Cat", "Dog", "Cat", "Dog", "Cat", "Dog", "Cat", "Dog"],
  3.         duration = 1500;
  5.     d3.select("body").selectAll("div")
  6.             .data(data)
  7.         .enter()
  8.         .append("div")
  9.             .attr("class", "fixed-cell")
  10.             .style("top", function (d, i) {
  11.                 return i * 40 + "px";
  12.             })
  13.             .style("background-color", "steelblue")
  14.             .style("color", "white")
  15.             .style("left", "500px")
  16.             .text(function (d) {
  17.                 return d;
  18.             })
  19.             .transition()
  20.                 .duration(duration)
  21.                     .style("left", "10px")
  22.             .filter(function(d){return d == "Cat";})
  23.                 .transition()
  24.                 .duration(duration)
  25.                     .style("left", "500px");
  26. </script>

1.gif

监听过渡事件

  1. <script type="text/javascript">
  2.     var body = d3.select("body"), duration = 3000;
  4.     var div = body.append("div")
  5.             .classed("box", true)
  6.             .style("background-color", "steelblue")
  7.             .style("color", "white")
  8.             .text("waiting")
  9.         .transition().duration(duration)
  10.                 .delay(1000)
  11.                 .on("start", function(){
  12.                     d3.select(this).text(function (d, i) {
  13.                         return "transitioning";
  14.                     });
  15.                 })
  16.                 .on("end", function(){
  17.                     d3.select(this).text(function (d, i) {
  18.                         return "done";
  19.                     });
  20.                 })
  21.             .style("margin-left", "600px");
  22. </script>

1.gif

使用定时器

  1. <script type="text/javascript">
  2.     var body = d3.select("body");
  4.     var countdown = body.append("div").append("input");
  6.     countdown.attr("type", "button")
  7.         .attr("class", "countdown")
  8.         .attr("value", "0");
  10.     function countUp(target){
  11.         var t = d3.timer(function(){
  12.             var value = countdown.attr("value");
  13.             if( value == target ) {
  14.                 t.stop();
  15.                 return true;
  16.             }
  17.             countdown.attr("value", ++value);      
  18.         });
  19.     }
  21.     function reset(){
  22.         countdown.attr("value", 0);
  23.     }
  24. </script>
  26. <div class="control-group">
  27.     <button onclick="countUp(100)">
  28.         Start
  29.     </button>
  30.     <button onclick="reset()">
  31.         Clear
  32.     </button>
  33. </div>

1.gif

形状

什么是 SVG

  • 矢量：矢量的图形更适合可视化
  • 可伸缩性：任意尺寸和放大程度下都不会失真
  • 可读性
  • 开放标准
  • 应用广泛
  • 互用性
  • 轻量

创建简单图形

  1. <style>
  2.     svg line{
  3.         stroke: grey;
  4.         stroke-width: 2;
  5.     }
  7.     svg circle{
  8.         stroke: red;
  9.         fill: none;
  10.         stroke-width: 2;
  11.     }
  13.     svg rect{
  14.         stroke: steelblue;
  15.         fill: none;
  16.         stroke-width: 2;
  17.     }
  19.     svg polygon{
  20.         stroke: green;
  21.         fill: none;
  22.         stroke-width: 2;
  23.     }
  24. </style>
  26. <script type="text/javascript">
  27.     var width = 600,
  28.         height = 500;
  30.     var svg = d3.select("body").append("svg");
  32.     svg.attr("height", height)
  33.         .attr("width", width);    
  35.     svg.append("line")
  36.         .attr("x1", 0)
  37.         .attr("y1", 200)
  38.         .attr("x2", 100)
  39.         .attr("y2", 100);
  41.     svg.append("circle")
  42.         .attr("cx", 200)
  43.         .attr("cy", 150)
  44.         .attr("r", 50);
  46.     svg.append("rect")
  47.         .attr("x", 300)
  48.         .attr("y", 100)
  49.         .attr("width", 100)
  50.         .attr("height", 100)
  51.         .attr("rx", 5);
  53.     svg.append("polygon")
  54.         .attr("points", "450,200 500,100 550,200");
  55. </script>

image.png

D3 还支持椭圆（ellipse）和折线（ployline）。

使用线条生成器

  1. <script type="text/javascript">
  2.     var width = 500,
  3.         height = 500,
  4.         margin = 50,
  5.         x = d3.scaleLinear()
  6.             .domain([0, 10])
  7.             .range([margin, width - margin]),
  8.         y = d3.scaleLinear()
  9.             .domain([0, 10])
  10.             .range([height - margin, margin]);
  12.     var data = [
  13.         [
  14.             {x: 0, y: 5},{x: 1, y: 9},{x: 2, y: 7},
  15.             {x: 3, y: 5},{x: 4, y: 3},{x: 6, y: 4},
  16.             {x: 7, y: 2},{x: 8, y: 3},{x: 9, y: 2}
  17.         ],
  19.         d3.range(10).map(function(i){
  20.             return {x: i, y: Math.sin(i) + 5};
  21.         })
  22.     ];
  24.     var line = d3.line()
  25.             .x(function(d){return x(d.x);})
  26.             .y(function(d){return y(d.y);});
  28.     var svg = d3.select("body").append("svg");
  30.     svg.attr("height", height)
  31.         .attr("width", width);
  33.      svg.selectAll("path")
  34.             .data(data)
  35.         .enter()
  36.             .append("path")
  37.             .attr("class", "line")            
  38.             .attr("d", function(d){return line(d);});
  40.     renderAxes(svg);
  42.     function renderAxes(svg){
  43.         var xAxis = d3.axisBottom()
  44.                 .scale(x.range([0, quadrantWidth()]));
  46.         var yAxis = d3.axisLeft()
  47.                 .scale(y.range([quadrantHeight(), 0]));
  49.         svg.append("g")        
  50.             .attr("class", "axis")
  51.             .attr("transform", function(){
  52.                 return "translate(" + xStart() 
  53.                     + "," + yStart() + ")";
  54.             })
  55.             .call(xAxis);
  57.         svg.append("g")        
  58.             .attr("class", "axis")
  59.             .attr("transform", function(){
  60.                 return "translate(" + xStart() 
  61.                     + "," + yEnd() + ")";
  62.             })
  63.             .call(yAxis);
  64.     }
  66.     function xStart(){
  67.         return margin;
  68.     }        
  70.     function yStart(){
  71.         return height - margin;
  72.     }
  74.     function xEnd(){
  75.         return width - margin;
  76.     }
  78.     function yEnd(){
  79.         return margin;
  80.     }
  82.     function quadrantWidth(){
  83.         return width - 2 * margin;
  84.     }
  86.     function quadrantHeight(){
  87.         return height - 2 * margin;
  88.     }        
  89. </script>

image.png

使用曲线

  1. <script type="text/javascript">
  2.     var width = 500,
  3.         height = 500,
  4.         margin = 30,
  5.         x = d3.scaleLinear()
  6.             .domain([0, 10])
  7.             .range([margin, width - margin]),
  8.         y = d3.scaleLinear()
  9.             .domain([0, 10])
  10.             .range([height - margin, margin]);
  12.     var data = [
  13.         [
  14.             {x: 0, y: 5},{x: 1, y: 9},{x: 2, y: 7},
  15.             {x: 3, y: 5},{x: 4, y: 3},{x: 6, y: 4},
  16.             {x: 7, y: 2},{x: 8, y: 3},{x: 9, y: 2}
  17.         ],
  18.         d3.range(10).map(function(i){
  19.             return {x: i, y: Math.sin(i) + 5};
  20.         })
  21.     ];
  23.     var svg = d3.select("body").append("svg");
  25.     svg.attr("height", height)
  26.         .attr("width", width);
  28.     renderAxes(svg);
  30.     render(d3.curveLinear);
  32.     renderDots(svg);
  34.     function render(mode){
  35.         var line = d3.line()
  36.                 .x(function(d){return x(d.x);})
  37.                 .y(function(d){return y(d.y);})
  38.                 .curve(mode);
  40.         svg.selectAll("path.line")
  41.                 .data(data)
  42.             .enter()
  43.                 .append("path")
  44.                 .attr("class", "line");
  46.         svg.selectAll("path.line")
  47.                 .data(data)
  48.             .attr("d", function(d){return line(d);});
  49.     }
  51.     function renderDots(svg){
  52.         data.forEach(function(list){
  53.              svg.append("g").selectAll("circle")
  54.                 .data(list)
  55.               .enter().append("circle")
  56.                 .attr("class", "dot")
  57.                 .attr("cx", function(d) { return x(d.x); })
  58.                 .attr("cy", function(d) { return y(d.y); })
  59.                 .attr("r", 4.5);
  60.         });
  61.     }
  63.     function renderAxes(svg){
  64.         var xAxis = d3.axisBottom()
  65.                 .scale(d3.scaleLinear().range([0, quadrantWidth()]));
  67.         var yAxis = d3.axisLeft()
  68.                 .scale(d3.scaleLinear().range([quadrantHeight(), 0]));
  70.         svg.append("g")
  71.             .attr("class", "axis")
  72.             .attr("transform", function(){
  73.                 return "translate(" + xStart() + "," + yStart() + ")";
  74.             })
  75.             .call(xAxis);
  77.         svg.append("g")
  78.             .attr("class", "axis")
  79.             .attr("transform", function(){
  80.                 return "translate(" + xStart() + "," + yEnd() + ")";
  81.             })
  82.             .call(yAxis);
  83.     }
  85.     function xStart(){
  86.         return margin;
  87.     }
  89.     function yStart(){
  90.         return height - margin;
  91.     }
  93.     function xEnd(){
  94.         return width - margin;
  95.     }
  97.     function yEnd(){
  98.         return margin;
  99.     }
  101.     function quadrantWidth(){
  102.         return width - 2 * margin;
  103.     }
  105.     function quadrantHeight(){
  106.         return height - 2 * margin;
  107.     }
  108. </script>
  110. <h4>Curve Mode:</h4>
  111. <div class="control-group">
  112.     <button onclick="render(d3.curveLinear)">linear</button>
  113.     <button onclick="render(d3.curveLinearClosed)">linear closed</button>
  114.     <button onclick="render(d3.curveStepBefore)">step before</button>
  115.     <button onclick="render(d3.curveStepAfter)">step after</button>
  116.     <button onclick="render(d3.curveBasis)">basis</button>
  117.     <button onclick="render(d3.curveBasisOpen)">basis open</button>
  118.     <button onclick="render(d3.curveBasisClosed)">basis closed</button>
  119. </div>
  120. <div class="control-group">
  121.     <button onclick="render(d3.curveBundle)">bundle</button>
  122.     <button onclick="render(d3.curveCardinal)">cardinal</button>
  123.     <button onclick="render(d3.curveCardinalOpen)">cardinal open</button>
  124.     <button onclick="render(d3.curveCardinalClosed)">cardinal closed</button>
  125.     <button onclick="render(d3.curveMonotoneY)">monotone</button>
  126.     <button onclick="render(d3.curveCatmullRom)">CatmullRom</button>
  127. </div>

image.png

更改线条的张力

  1. <script type="text/javascript">
  2.     var width = 500,
  3.         height = 500,
  4.         margin = 30,
  5.         duration = 500,    
  6.         x = d3.scaleLinear()
  7.             .domain([0, 10])
  8.             .range([margin, width - margin]),
  9.         y = d3.scaleLinear()
  10.             .domain([0, 1])
  11.             .range([height - margin, margin]);
  13.     var data = d3.range(10).map(function(i){
  14.             return {x: i, y: (Math.sin(i * 3) + 1) / 2};
  15.         });
  17.     var svg = d3.select("body").append("svg");
  19.     svg.attr("height", height)
  20.         .attr("width", width);
  22.     renderAxes(svg);
  24.     render(1);
  26.     function render(tension){
  27.         var line = d3.line()
  28.                 .curve(d3.curveCardinal.tension(tension))
  29.                 .x(function(d){return x(d.x);})
  30.                 .y(function(d){return y(d.y);});
  32.         svg.selectAll("path.line")
  33.                 .data([tension])
  34.             .enter()
  35.                 .append("path")
  36.                 .attr("class", "line");
  38.         svg.selectAll("path.line")
  39.                 .data([tension])
  40.             .transition().duration(duration)
  41.                 .ease(d3.easeLinear)
  42.             .attr("d", function(d){
  43.                 return line(data);
  44.             });
  46.         svg.selectAll("circle")
  47.             .data(data)
  48.           .enter().append("circle")
  49.             .attr("class", "dot")
  50.             .attr("cx", function(d) { return x(d.x); })
  51.             .attr("cy", function(d) { return y(d.y); })
  52.             .attr("r", 4.5);
  53.     }
  55.     function renderAxes(svg){
  56.         var xAxis = d3.axisBottom()
  57.                 .scale(d3.scaleLinear().range([0, quadrantWidth()]));
  59.         var yAxis = d3.axisLeft()
  60.                 .scale(d3.scaleLinear().range([quadrantHeight(), 0]));
  62.         svg.append("g")
  63.             .attr("class", "axis")
  64.             .attr("transform", function(){
  65.                 return "translate(" + xStart() + "," + yStart() + ")";
  66.             })
  67.             .call(xAxis);
  69.         svg.append("g")
  70.             .attr("class", "axis")
  71.             .attr("transform", function(){
  72.                 return "translate(" + xStart() + "," + yEnd() + ")";
  73.             })
  74.             .call(yAxis);
  75.     }
  77.     function xStart(){
  78.         return margin;
  79.     }        
  81.     function yStart(){
  82.         return height - margin;
  83.     }
  85.     function xEnd(){
  86.         return width - margin;
  87.     }
  89.     function yEnd(){
  90.         return margin;
  91.     }
  93.     function quadrantWidth(){
  94.         return width - 2 * margin;
  95.     }
  97.     function quadrantHeight(){
  98.         return height - 2 * margin;
  99.     }
  100. </script>
  102. <h4>Line Tension:</h4>
  103. <div class="control-group">
  104.     <button onclick="render(0)">0</button>
  105.     <button onclick="render(0.2)">0.2</button>
  106.     <button onclick="render(0.4)">0.4</button>
  107.     <button onclick="render(0.6)">0.6</button>
  108.     <button onclick="render(0.8)">0.8</button>
  109.     <button onclick="render(1)">1</button>
  110. </div>

image.png

使用区域生成器

  1. <script type="text/javascript">
  2.     var width = 500,
  3.         height = 500,
  4.         margin = 30,
  5.         duration = 500,
  6.         x = d3.scaleLinear()
  7.             .domain([0, 10])
  8.             .range([margin, width - margin]),
  9.         y = d3.scaleLinear()
  10.             .domain([0, 10])
  11.             .range([height - margin, margin]);
  13.     var data = d3.range(11).map(function(i){
  14.             return {x: i, y: Math.sin(i)*3 + 5};
  15.         });
  17.     var svg = d3.select("body").append("svg");
  19.     svg.attr("height", height)
  20.         .attr("width", width);        
  22.     renderAxes(svg);
  24.     render();
  26.     renderDots(svg);
  28.     function render(){
  29.         var line = d3.line()
  30.                 .x(function(d){return x(d.x);})
  31.                 .y(function(d){return y(d.y);});
  33.         svg.selectAll("path.line")
  34.                 .data([data])
  35.             .enter()
  36.                 .append("path")
  37.                 .attr("class", "line");                
  39.         svg.selectAll("path.line")
  40.                 .data([data])       
  41.             .attr("d", function(d){return line(d);});        
  43.         var area = d3.area()
  44.             .x(function(d) { return x(d.x); })
  45.             .y0(y(0))
  46.             .y1(function(d) { return y(d.y); });
  48.         svg.selectAll("path.area")
  49.                 .data([data])
  50.             .enter()
  51.                 .append("path")
  52.                 .attr("class", "area")
  53.                 .attr("d", function(d){return area(d);});
  54.     }
  56.     function renderDots(svg){        
  57.          svg.append("g").selectAll("circle")
  58.             .data(data)
  59.           .enter().append("circle")
  60.             .attr("class", "dot")
  61.             .attr("cx", function(d) { return x(d.x); })
  62.             .attr("cy", function(d) { return y(d.y); })
  63.             .attr("r", 4.5);
  64.     }
  66.     function renderAxes(svg){
  67.         var xAxis = d3.axisBottom()
  68.                 .scale(d3.scaleLinear().range([0, quadrantWidth()]));
  70.         var yAxis = d3.axisLeft()
  71.                 .scale(d3.scaleLinear().range([quadrantHeight(), 0]));
  73.         svg.append("g")
  74.             .attr("class", "axis")
  75.             .attr("transform", function(){
  76.                 return "translate(" + xStart() + "," + yStart() + ")";
  77.             })
  78.             .call(xAxis);
  80.         svg.append("g")
  81.             .attr("class", "axis")
  82.             .attr("transform", function(){
  83.                 return "translate(" + xStart() + "," + yEnd() + ")";
  84.             })
  85.             .call(yAxis);
  86.     }
  88.     function xStart(){
  89.         return margin;
  90.     }        
  92.     function yStart(){
  93.         return height - margin;
  94.     }
  96.     function xEnd(){
  97.         return width - margin;
  98.     }
  100.     function yEnd(){
  101.         return margin;
  102.     }
  104.     function quadrantWidth(){
  105.         return width - 2 * margin;
  106.     }
  108.     function quadrantHeight(){
  109.         return height - 2 * margin;
  110.     }
  111. </script>

image.png

使用断面曲线

  1. <script type="text/javascript">
  2.     var width = 500,
  3.         height = 500,
  4.         margin = 30,
  5.         x = d3.scaleLinear()
  6.             .domain([0, 10])
  7.             .range([margin, width - margin]),
  8.         y = d3.scaleLinear()
  9.             .domain([0, 10])
  10.             .range([height - margin, margin]);
  12.     var data = d3.range(11).map(function(i){
  13.         return {x: i, y: Math.sin(i)*3 + 5};
  14.     });
  16.     var svg = d3.select("body").append("svg");
  18.     svg.attr("height", height)
  19.         .attr("width", width);        
  21.     renderAxes(svg);
  23.     render(d3.curveLinear);
  25.     renderDots(svg);
  27.     function render(mode){
  28.         var line = d3.line()
  29.                 .x(function(d){return x(d.x);})
  30.                 .y(function(d){return y(d.y);})
  31.                 .curve(mode);
  33.         svg.selectAll("path.line")
  34.                 .data([data])
  35.             .enter()
  36.                 .append("path")
  37.                 .attr("class", "line");                
  39.         svg.selectAll("path.line")
  40.                 .data([data])       
  41.             .attr("d", function(d){return line(d);});        
  43.         var area = d3.area()
  44.             .x(function(d) { return x(d.x); })
  45.             .y0(y(0))
  46.             .y1(function(d) { return y(d.y); })
  47.             .curve(mode);
  49.         svg.selectAll("path.area")
  50.                 .data([data])
  51.             .enter()
  52.                 .append("path")
  53.                 .attr("class", "area")
  55.         svg.selectAll("path.area")
  56.             .data([data])
  57.             .attr("d", function(d){return area(d);});        
  58.     }
  60.     function renderDots(svg){        
  61.          svg.append("g").selectAll("circle")
  62.             .data(data)
  63.           .enter().append("circle")
  64.             .attr("class", "dot")
  65.             .attr("cx", function(d) { return x(d.x); })
  66.             .attr("cy", function(d) { return y(d.y); })
  67.             .attr("r", 4.5);
  68.     }
  70.     function renderAxes(svg){
  71.         var xAxis = d3.axisBottom()
  72.                 .scale(d3.scaleLinear().range([0, quadrantWidth()]));
  74.         var yAxis = d3.axisLeft()
  75.                 .scale(d3.scaleLinear().range([quadrantHeight(), 0]));
  77.         svg.append("g")
  78.             .attr("class", "axis")
  79.             .attr("transform", function(){
  80.                 return "translate(" + xStart() + "," + yStart() + ")";
  81.             })
  82.             .call(xAxis);
  84.         svg.append("g")
  85.             .attr("class", "axis")
  86.             .attr("transform", function(){
  87.                 return "translate(" + xStart() + "," + yEnd() + ")";
  88.             })
  89.             .call(yAxis);
  90.     }
  92.     function xStart(){
  93.         return margin;
  94.     }        
  96.     function yStart(){
  97.         return height - margin;
  98.     }
  100.     function xEnd(){
  101.         return width - margin;
  102.     }
  104.     function yEnd(){
  105.         return margin;
  106.     }
  108.     function quadrantWidth(){
  109.         return width - 2 * margin;
  110.     }
  112.     function quadrantHeight(){
  113.         return height - 2 * margin;
  114.     }
  115. </script>
  117. <h4>Curve Mode:</h4>
  118. <div class="control-group">
  119.     <button onclick="render(d3.curveLinear)">linear</button>
  120.     <button onclick="render(d3.curveLinearClosed)">linear closed</button>
  121.     <button onclick="render(d3.curveStepBefore)">step before</button>
  122.     <button onclick="render(d3.curveStepAfter)">step after</button>
  123.     <button onclick="render(d3.curveBasis)">basis</button>
  124.     <button onclick="render(d3.curveBasisOpen)">basis open</button>
  125.     <button onclick="render(d3.curveBasisClosed)">basis closed</button>
  126. </div>
  127. <div class="control-group">
  128.     <button onclick="render(d3.curveBundle)">bundle</button>
  129.     <button onclick="render(d3.curveCardinal)">cardinal</button>
  130.     <button onclick="render(d3.curveCardinalOpen)">cardinal open</button>
  131.     <button onclick="render(d3.curveCardinalClosed)">cardinal closed</button>
  132.     <button onclick="render(d3.curveMonotoneY)">monotone</button>
  133.     <button onclick="render(d3.curveCatmullRom)">CatmullRom</button>
  134. </div>

image.png

使用圆弧生成器

  1. <script type="text/javascript">
  2.     var width = 400,
  3.         height = 400,
  4.         fullAngle = 2 * Math.PI,
  5.         colors =  d3.scaleOrdinal(d3.schemeCategory20c);
  7.     var svg = d3.select("body").append("svg")
  8.                 .attr("class", "pie")
  9.                 .attr("height", height)
  10.                 .attr("width", width);
  12.     function render(innerRadius, endAngle){
  13.         if(!endAngle) endAngle = fullAngle;
  15.         var data = [
  16.             {startAngle: 0, endAngle: 0.1 * endAngle},
  17.             {startAngle: 0.1 * endAngle, endAngle: 0.2 * endAngle},
  18.             {startAngle: 0.2 * endAngle, endAngle: 0.4 * endAngle},
  19.             {startAngle: 0.4 * endAngle, endAngle: 0.6 * endAngle},
  20.             {startAngle: 0.6 * endAngle, endAngle: 0.7 * endAngle},
  21.             {startAngle: 0.7 * endAngle, endAngle: 0.9 * endAngle},
  22.             {startAngle: 0.9 * endAngle, endAngle: endAngle}
  23.         ];
  25.         var arc = d3.arc().outerRadius(200)
  26.                         .innerRadius(innerRadius);
  28.         svg.select("g").remove();
  30.         svg.append("g")
  31.                 .attr("transform", "translate(200,200)")
  32.         .selectAll("path.arc")
  33.                 .data(data)
  34.             .enter()
  35.                 .append("path")
  36.                     .attr("class", "arc")
  37.                     .attr("fill", function(d, i){return colors(i);})
  38.                     .attr("d", function(d, i){
  39.                         return arc(d, i);
  40.                     });
  41.     }
  43.     render(0);
  44. </script>
  46. <div class="control-group">
  47.     <button onclick="render(0)">Circle</button>
  48.     <button onclick="render(100)">Annulus(Donut)</button>
  49.     <button onclick="render(0, Math.PI)">Circular Sector</button>
  50.     <button onclick="render(100, Math.PI)">Annulus Sector</button>
  51. </div>

image.png

实现圆弧过渡

  1. <script type="text/javascript">
  2.     var width = 400,
  3.             height = 400,
  4.             endAngle = 2 * Math.PI,
  5.             colors = d3.scaleOrdinal(d3.schemeCategory20c);
  7.     var svg = d3.select("body").append("svg")
  8.             .attr("class", "pie")
  9.             .attr("height", height)
  10.             .attr("width", width);
  12.     function render(innerRadius) {
  14.         var data = [
  15.             {startAngle: 0, endAngle: 0.1 * endAngle},
  16.             {startAngle: 0.1 * endAngle, endAngle: 0.2 * endAngle},
  17.             {startAngle: 0.2 * endAngle, endAngle: 0.4 * endAngle},
  18.             {startAngle: 0.4 * endAngle, endAngle: 0.6 * endAngle},
  19.             {startAngle: 0.6 * endAngle, endAngle: 0.7 * endAngle},
  20.             {startAngle: 0.7 * endAngle, endAngle: 0.9 * endAngle},
  21.             {startAngle: 0.9 * endAngle, endAngle: endAngle}
  22.         ];
  24.         var arc = d3.arc()
  25.                 .outerRadius(200).innerRadius(innerRadius);
  27.         svg.select("g").remove();
  29.         svg.append("g")
  30.             .attr("transform", "translate(200,200)")
  31.             .selectAll("path.arc")
  32.                 .data(data)
  33.             .enter()
  34.                 .append("path")
  35.                 .attr("class", "arc")
  36.                 .attr("fill", function (d, i) {
  37.                     return colors(i);
  38.                 })
  39.                 .transition().duration(1000)
  40.                 .attrTween("d", function (d) {
  41.                     var start = {startAngle: 0, endAngle: 0}; // <-A
  42.                     var interpolate = d3.interpolate(start, d); // <-B
  43.                     return function (t) {
  44.                         return arc(interpolate(t)); // <-C
  45.                     };
  46.                 });
  47.     }
  49.     render(100);
  50. </script>

1.gif

参考

【1】Data Visualization and D3.js（视频）
【2】D3 4.x 数据可视化实战手册@[加]朱启
【3】https://github.com/NickQiZhu/d3-cookbook-v2（D3 4.x 数据可视化实战手册 代码）
【4】D3.js 中文文档