数据可视化与 d3.js

曾小乱 | 2019年7月1日 | 1,938 views

数据可视化与 d3.js -> 浅说数据可视化与浅说 d3.js

D3.js is a JavaScript library for manipulating documents based on data.

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

First release at Feb 18, 2011, 4:02 AM GMT+8

echarts、highcharts VS d3

示例一个

d3 链式调用的原理

function line () {
  var x;
  var y;

  function innerLine(data) {
    var path = ''
    var first = true;
    
    for (var i = 0; i < data.length; i += 1) {
      if (first) {
        path += 'M ' + x(data[i]) + ' ' + y(data[i])
        first = false;
      } else {
        path += 'L ' + x(data[i]) + ' ' + y(data[i])
      }
    }

    return path
  }
  
  innerLine.x = function (_) {
    return arguments.length ? (x = typeof _ === 'function' ? _ : innerLine, innerLine) : innerLine
  }

  innerLine.y = function (_) {
    return arguments.length ? (y = typeof _ === 'function' ? _ : innerLine, innerLine) : innerLine
  }
  return innerLine;
}