1.echarts:

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <!-- 引入 echarts.js -->
  <script src="http://echarts.baidu.com/dist/echarts.js"></script>
  </head>
  <body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
   
  // 柱形图
  var option = {
  title: {
  text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
  data:['销量']
  },
  xAxis: {
  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
  name: '销量',
  type: 'bar',
  data: [5, 20, 36, 10, 10, 20]
  }]
  };
  //折线图
  // var option = {
  // xAxis: {
  // type: 'category',
  // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  // },
  // yAxis: {
  // type: 'value'
  // },
  // series: [{
  // data: [820, 932, 901, 934, 1290, 1330, 1320],
  // type: 'line'
  // }]
  // };
   
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  </script>
  </body>
  </html>
   

2.highcharts:

  <html>
  <head>
  <meta charset="utf-8" />
  <title>highcharts开发指南</title>
  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>
  <script>
  $(function () {
  $('#container').highcharts({
  chart: {
  type: 'column'
  },
  title: {
  text: 'My first Highcharts chart'
  },
  xAxis: {
  categories: ['my', 'first', 'chart']
  },
  yAxis: {
  title: {
  text: 'something'
  }
  },
  series: [{
  name: 'Jane',
  data: [1, 0, 4]
  }, {
  name: 'John',
  data: [5, 7, 3]
  }]
  });
  });
  </script>
  </head>
   
  <body>
  <div id="container" style="min-width:800px;height:400px;"></div>
  </body>
  </html>
   

3.d3:

  <!DOCTYPE html>
  <html data-ember-extension="1">
   
  <head>
  <meta charset="utf-8" />
  <title>D3.V4开发指南</title>
  <style>
  .bar {
  fill: green ;
  }
  .bar:hover {
  fill: yellowgreen;
  }
  /*字体*/
  .tick text {
  /*font-family: sans-serif;*/
  font-size: 11px;
  }
  /*X轴*/
  .axis--x path,
  .axis--x line{
  fill: none;
  stroke: blue;
  shape-rendering: crispEdges;
  display: none;
  }
  /*Y轴*/
  .axis--y path,
  .axis--y line{
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
  /*display: none;*/
  }
  </style>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
  <h3>2013-2017年广东省降雨量:D3.V4入门</h3>
  <!--画布大小-->
  <svg width="960" height="500"></svg>
  <script>
  //SVG画布:
  var svg = d3.select("svg"),
  //预留坐标轴文字显示：逆时针设置
  margin = {
  top: 0,
  right: 0,
  bottom: 20,
  left: 40
  },
  //实践宽高=总长减去外边距
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom;
   
  //线轴：X轴矩形边距0.1，范围[0,宽度]或[高度，0]
  var x = d3.scaleBand().rangeRound([0, width/2]).padding(0.1),
  y = d3.scaleLinear().rangeRound([height, 0]);
  //边距：svg嵌套：g标签+rect标签
  var g = svg.append("g")
  //.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  .attr("transform", function(){
  return "translate(" + margin.left + "," + margin.top + ")";
  })
  //.call(axis);
  //数据：data.tsv含参数：letter frequency
  d3.tsv("data.tsv", function(d) {//d：取到的是遍历后的每一个Object
  d.frequency = +d.frequency;
  return d;
  }, function(error, data) {
  console.log(data,111);
  var data=[
  {letter: "2013", frequency: 1292},
  {letter: "2014", frequency: 1392},
  {letter: "2015", frequency: 1092},
  {letter: "2016", frequency: 1492},
  {letter: "2017", frequency: 1392},
  ];
  if(error) throw error;
  x.domain(data.map(function(d) {
  return d.letter;
  }));
  y.domain([0, d3.max(data, function(d) {
  return d.frequency;//y轴刻度：根据降雨量的多少设置高度
  })]);
  g.append("g")
  .attr("class", "axis axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));
  g.append("g")
  .attr("class", "axis axis--y")
  .call(d3.axisLeft(y).ticks(5))//刻度，单位（转换）
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", "0.71em")
  .attr("text-anchor", "end")
  .text("Frequency");
  g.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) {
  return x(d.letter);
  })
  .attr("y", function(d) {
  return y(d.frequency);
  })
  .attr("width", x.bandwidth())
  .attr("height", function(d) {
  return height - y(d.frequency);
  });
   
  });
  </script>
  </body>
   
  </html>

【附】：d3.js API说明：

d3 (核心部分)
选择集
d3.select - 从当前文档中选择一系列元素。
d3.selectAll - 从当前文档中选择多项元素。
selection.attr - 设置或获取指定属性。

selection.classed - 加入或删除选定元素的 CSS 类（CSS class）。

selection.style - 设置或删除 CSS 属性。style优先级高于attr。

selection.property - 设置或获原生的属性值（raw property）。
selection.text - 设置或获取选定元素的标签体文本内容。
selection.html - 设置或获取选定元素的 HTML 内容（类似 innerHTML ）
selection.append - 创建并加入新元素到选定元素后。

selection.insert - 创建并加入新元素到选定元素前。
selection.remove - 从当前文档对象中删除选定的元素。
selection.data - 设置或获取一组元素的绑定数据（get or set data for a group of elements, while computing a relational join.）
selection.enter - 返回缺失元素的占位对象（placeholder），指向绑定的数据中比选定元素集多出的一部分元素。
selection.exit - 返回多余元素的元素集。即选择元素中比绑定数据多出的一部分。(关于data, enter, exit原理的演示样例1, 演示样例2, 演示样例3)
selection.datum - 设置或获取单独元素的数据，不进行关联。（get or set data for individual elements, without computing a join.）
selection.filter - 依据绑定的数据过滤选择集。
selection.sort - 依据绑定的数据对选择的元素进行排序。
selection.order - 对文档中的元素重排序以匹配选择集。
selection.on - 加入或删除事件监听器。

selection.transition - 启动一个过渡效果（返回 Transition 对象）。能够理解为动画。

selection.interrupt - 马上停止全部正在进行的动画动作。
selection.each - 为每一个选择的元素集调用指定的函数。
selection.call - 为当前选择的元素集调用指定的函数。
selection.empty - 測试选择集是否为空。
selection.node - 返回选择集中的第一个元素。
selection.size - 返回选择集中的元素个数。
selection.select - 选择所选的元素中的第一个子元素组成新的选择集。
selection.selectAll - 选择所选的元素中的多个子元素组成新的选择集。

d3.selection - 选择集对象原型（可通过 d3.selection.prototype 为选择集增强功能）。

d3.event - 获取当前交互的用户事件。
d3.mouse - 获取鼠标的相对某元素的坐标。
d3.touches - 获取相对某元素的触控点坐标。
过渡效果
d3.transition - 開始一个动画过渡。简单教程
transition.delay - 指定每一个元素过渡的延迟时间（单位：毫秒ms）。
transition.duration - 指定每一个元素过渡的持续时间（单位：毫秒ms）。
transition.ease - 指定过渡的缓冲函数。

transition.attr - 平滑过渡到新的attr属性值（起始属性值为当前属性）。
transition.attrTween - 在不同attr属性值之间平滑过渡（起始属性值可在过渡函数中设置,甚至整个过渡函数都能够自己定义）。

transition.style - 平滑过渡到新的style属性值。
transition.styleTween - 在不同style属性值之间平滑过渡。

transition.text - 在过渡開始时设置文本内容。
transition.tween - 使某个属性过渡到一个新的属性值，该属性能够是非attr或非style属性。比方text。
transition.select - 选择每一个当前元素的某个子元素进行过渡。

transition.selectAll - 选择每一个当前元素的多个子元素进行过渡。

transition.filter - 通过数据筛选出当前元素中的部分元素进行过渡。

transition.transition - 当前过渡结束后開始新的过渡。

transition.remove - 过渡结束后移除当前元素。
transition.empty - 假设过渡为空就返回true。

假设当前元素中没有非null元素。则此过渡为空。
transition.node - 返回过渡中的第一个元素。
transition.size - 返回过渡中当前元素的数量。
transition.each - 遍历每一个元素运行操作。

不指定触发类型时，马上运行操作。

当指定触发类型为'start'或'end'时,会在过渡開始或结束时运行操作。
transition.call - 以当前过渡为this运行某个函数。

d3.ease - 定制过渡的缓冲函数。
ease - 缓冲函数。缓冲函数可让动画效果更自然，比方elastic缓冲函数可用以模拟弹性物体的运动。

是一种插值函数的特例。
d3.timer - 開始一个定制的动画计时。

功能类似于setTimeout，但内部用requestAnimationFrame实现，更高效。

d3.timer.flush - 立马运行当前没有延迟的计时。

可用于处理闪屏问题。
d3.interpolate - 生成一个插值函数，在两个參数间插值。差值函数的类型会依据输入參数的类型（数字、字符串、颜色等）而自己主动选择。

interpolate - 插值函数。输入參数在[0, 1]之间。
d3.interpolateNumber - 在两个数字间插值。
d3.interpolateRound - 在两个数字间插值，返回值会四舍五入取整。
d3.interpolateString - 在两个字符串间插值。解析字符串中的数字。相应的数字会插值。

d3.interpolateRgb - 在两个RGB颜色间插值。

d3.interpolateHsl - 在两个HSL颜色间插值。
d3.interpolateLab - 在两个L*a*b*颜色间插值。
d3.interpolateHcl - 在两个HCL颜色间插值。
d3.interpolateArray - 在两个数列间插值。d3.interpolateArray( [0, 1], [1, 10, 100] )(0.5); // returns [0.5, 5.5, 100]
d3.interpolateObject - 在两个object间插值。

d3.interpolateArray( {x: 0, y: 1}, {x: 1, y: 10, z: 100} )(0.5); // returns {x: 0.5, y: 5.5, z: 100}
d3.interpolateTransform - 在两个2D仿射变换间插值。
d3.interpolateZoom - 在两个点之间平滑地缩放平移。演示样例
d3.interpolators - 加入一个自己定义的插值函数.
数据操作(Working with Arrays)
d3.ascending - 升序排序函数.
d3.descending - 降序排序函数.
d3.min - 获取数组中的最小值.
d3.max - 获取数组中的最大值.
d3.extent - 获取数组的范围(最小值和最大值).
d3.sum - 获取数组中数字之和.
d3.mean -获取数组中数字的算术平均值.
d3.median - 获取数组中数字的中位数 (相当于 0.5-quantile的值).
d3.quantile - 获取排好序的数组的一个分位数(quantile).
d3.bisect - 通过二分法获取某个数在排好序的数组中的插入位置(同d3.bisectRight).
d3.bisectRight - 获取某个数在排好序的数组中的插入位置(相等的值归入右边).
d3.bisectLeft - 获取某个数在排好序的数组中的插入位置(相等的值归入左边).
d3.bisector - 自己定义一个二分函数.
d3.shuffle - 洗牌，随机排列数组中的元素.
d3.permute - 以指定顺序排列数组中的元素.
d3.zip - 将多个数组合并成一个数组的数组，新数组的的第i个元素是原来各个数组中第i个元素组成的数组.
d3.transpose - 矩阵转置，通过d3.zip实现.
d3.pairs - 返回临近元素对的数组，d3.pairs([1, 2, 3, 4]); // returns [ [1, 2], [2, 3], [3, 4] ].
d3.keys - 返回关联数组(哈希表、json、object对象)的key组成的数组.
d3.values - 返回关联数组的value组成的数组.
d3.entries - 返回关联数组的key-value实体组成的数组, d3.entries({ foo: 42 }); // returns [{key: "foo", value: 42}].
d3.merge - 将多个数组连成一个，类似于原生方法concat. d3.merge([ [1], [2, 3] ]); // returns [1, 2, 3].
d3.range - 获得一个数列. d3.range([start, ]stop[, step])
d3.nest - 获得一个nest对象，将数组组织成层级结构. 演示样例：http://bl.ocks.org/phoebebright/raw/3176159/
nest.key - 为nest层级结构添加一个层级.
nest.sortKeys - 将当前的nest层级结构按key排序.
nest.sortValues - 将叶nest层级按value排序.
nest.rollup - 设置改动叶节点值的函数.
nest.map - 运行nest操作, 返回一个关联数组(json).
nest.entries - 运行nest操作, 返回一个key-value数组. 假设nest.map返回的结果类似于{ foo: 42 }, 则nest.entries返回的结果类似于[{key: "foo", value: 42}].
d3.map - 将javascript的object转化为hash,屏蔽了object的原型链功能导致的与hash不一致的问题。

map.has - map有某个key就返回true.
map.get - 返回map中某个key相应的value.
map.set - 设置map中某个key相应的value.
map.remove - 删除map中的某个key.
map.keys - 返回map中全部key组成的数组.
map.values - 返回map中全部value组成的数组.
map.entries - 返回map中全部entry（key-value键值对）组成的数组.类似于{ foo: 42 }转化成[{key: "foo", value: 42}]
map.forEach - 对map中每个entry运行某个函数.
d3.set - 将javascript的array转化为set,屏蔽了array的object原型链功能导致的与set不一致的问题。

set中的value是array中每一个值转换成字符串的结果。

set中的value是去重过的。

set.has - 返回set中是否含有某个value.
set.add - 加入某个value.
set.remove - 删除某个value.
set.values - 返回set中的值组成的数组.set中的value是去重过的.
set.forEach - 对set中每个value运行某个函数.
Math
d3.random.normal - 利用正态分布产生一个随机数.
d3.random.logNormal - 利用对数正态分布产生一个随机数.
d3.random.irwinHall - 利用Irwin–Hall分布（简单可行而且easy编程的正态分布实现方法）产生一个随机数.
d3.transform - 将svg的tranform格式转化为标准的2D转换矩阵字符串格式.
加载外部资源(Loading External Resources)
d3.xhr - 发起XMLHttpRequest请求获取资源。
xhr.header - 设置 request header。

xhr.mimeType - 设置 Accept request header，并重写 response MIME type。
xhr.response - 设置response返回值转化函数。如 function(request) { return JSON.parse(request.responseText); }
xhr.get - 发起GET请求。

xhr.post - 发起POST请求。
xhr.send - 以指定的方法和数据发起请求。
xhr.abort - 终止当前请求。
xhr.on - 为请求加入”beforesend”, “progress”, “load” 或 “error” 等事件监听器。
d3.text - 请求一个text文件。
d3.json - 请求一个JSON。
d3.html - 请求一个html文本片段。

d3.xml - 请求一个XML文本片段。
d3.csv - 请求一个CSV(comma-separated values, 逗号分隔值)文件。
d3.tsv - 请求一个TSV(tab-separated values, tab分隔值)文件。
字符串格式化(String Formatting)
d3.format - 将数字转化成指定格式的字符串。转化的格式很丰富，且很智能。
d3.formatPrefix - 以指定的值和精度获得一个[SI prefix]对象。这个函数可用来自己主动推断数据的量级。 如K(千)，M(百万)等等。演示样例: var prefix = d3.formatPrefix(1.21e9); console.log(prefix.symbol); // “G”; console.log(prefix.scale(1.21e9)); // 1.21
d3.requote - 将字符串转义成可在正則表達式中使用的格式。如 d3.requote(‘$'); // return “\$”
d3.round - 设置某个数按小数点后多少位取整。

与toFixed()类似，但返回格式为number。

如 d3.round(1.23); // return 1; d3.round(1.23, 1); // return 1.2; d3.round(1.25, 1); // return 1.3
CSV 格式化 (d3.csv)
d3.csv - 获取一个CSV (comma-separated values, 冒号分隔值)文件。
d3.csv.parse - 将CSV文件字符串转化成object的数组，object的key由第一行决定。

如： [{"Year": "1997", "Length": "2.34"}, {"Year": "2000", "Length": "2.38"}]
d3.csv.parseRows - 将CSV文件字符串转化成数组的数组。如： [ ["Year", "Length"],["1997", "2.34"],["2000", "2.38"] ]
d3.csv.format - 将object的数组转化成CSV文件字符串，是d3.csv.parse的逆操作。

d3.csv.formatRows - 将数组的数组转化成CSV文件字符串，是d3.csv.parseRows的逆操作。
d3.tsv - 获取一个TSV (tab-separated values, tab分隔值)文件。
d3.tsv.parse - 类似于d3.csv.parse。
d3.tsv.parseRows - 类似于d3.csv.parseRows。
d3.tsv.format - 类似于d3.csv.format。

d3.tsv.formatRows - 类似于d3.csv.formatRows。
d3.dsv - 创建一个类似于d3.csv的文件处理对象，能够自己定义分隔符和mime type。如：var dsv = d3.dsv(“|”, “text/plain”);
颜色
d3.rgb - 指定一种颜色。创建一个RGB颜色对象。

支持多种颜色格式的输入。
rgb.brighter - 增强颜色的亮度，变化幅度由參数决定。
rgb.darker - 减弱颜色的亮度，变化幅度由參数决定。
rgb.hsl - 将RGB颜色对象转化成HSL颜色对象。
rgb.toString - RGB颜色转化为字符串格式。

d3.hsl - 创建一个HSL颜色对象。支持多种颜色格式的输入。
hsl.brighter - 增强颜色的亮度，变化幅度由參数决定。

hsl.darker - 减弱颜色的亮度。变化幅度由參数决定。

hsl.rgb - 将HSL颜色对象转化成RGB颜色对象。
hsl.toString - HSL颜色转化为字符串格式。

d3.lab - 创建一个Lab颜色对象。

支持多种颜色格式的输入。
lab.brighter - 增强颜色的亮度。变化幅度由參数决定。
lab.darker - 减弱颜色的亮度。变化幅度由參数决定。

lab.rgb - 将Lab颜色对象转化成RGB颜色对象。
lab.toString - Lab颜色转化为字符串格式。
d3.hcl - 创建一个HCL颜色对象。

支持多种颜色格式的输入。
hcl.brighter - 增强颜色的亮度，变化幅度由參数决定。
hcl.darker - 减弱颜色的亮度。变化幅度由參数决定。

hcl.rgb - 将HCL颜色对象转化成RGB颜色对象。
hcl.toString - HCL颜色转化为字符串格式。
命名空间
d3.ns.prefix - 获取或扩展已知的XML命名空间。
d3.ns.qualify - 验证命名空间前缀是否存在, 如”xlink:href”中xlink是已知的命名空间。
内部方法（Internals）
d3.functor - 函数化。将非函数变量转化为仅仅返回该变量值的函数。

输入函数，则返回原函数；输入值。则返回一个函数。该函数仅仅返回原值。
d3.rebind - 将一个对象的方法绑定到还有一个对象上。
d3.dispatch - 创建一个定制的事件。
dispatch.on - 加入或移除一个事件监听器。对一个事件可加入多个监听器。
dispatch.type - 触发事件。当中‘type'为要触发的事件的名称。
d3.scale(Scales)
定量变换(Quantitative)
d3.scale.linear - 创建一个线性定量变换。（建议參考源代码以深入理解各种变换。）
linear - 输入一个定义域的值，返回一个值域的值。
linear.invert - 反变换。输入值域值返回定义域值。
linear.domain - get或set定义域。
linear.range - get或set值域。
linear.rangeRound - 设置值域，并对结果取整。

linear.interpolate - get或set变换的插值函数，如将默认的线性插值函数替换成取整的线性插值函数d3_interpolateRound。
linear.clamp - 设置值域是否闭合。默认不闭合。当值域闭合时。假设插值结果在值域之外。会取值域的边界值。

如值域为[1, 2],插值函数的计算结果为3。假设不闭合，终于结果为3。假设闭合，终于结果为2。
linear.nice - 扩展定义域范围使定义域更规整。如[0.20147987687960267, 0.996679553296417] 变成 [0.2, 1]。
linear.ticks - 从定义域中取出有代表性的值。

通经常使用于坐标轴刻度的选取。

linear.tickFormat - 获取格式转化函数，通经常使用于坐标轴刻度的格式转化。

如：var x = d3.scale.linear().domain([-1, 1]); console.log(x.ticks(5).map(x.tickFormat(5, “+%”))); // ["-100%", "-50%", "+0%", "+50%", "+100%"]
linear.copy - 从已有的变换中复制出一个变换。

d3.scale.sqrt - 创建一个求平方根的定量转换。
d3.scale.pow - 创建一个指数变换。

（可參考linear相应函数的凝视）
pow - 输入一个定义域的值，返回一个值域的值。
pow.invert - 反变换。输入值域值返回定义域值。

pow.domain - get或set定义域。

pow.range - get或set值域。
pow.rangeRound - 设置值域，并对结果取整。
pow.interpolate - get或set变换的插值函数。
pow.clamp - 设置值域是否闭合，默认不闭合。

pow.nice - 扩展定义域范围使定义域更规整。

pow.ticks - 从定义域中取出有代表性的值。

通经常使用于坐标轴刻度的选取。
pow.tickFormat - 获取格式转化函数。通经常使用于坐标轴刻度的格式转化。
pow.exponent - get或set指数的幂次。

默觉得1次幂。

pow.copy - 从已有的变换中复制出一个变换。
d3.scale.log - 创建一个对数变换。（可參考linear相应函数的凝视）
log - 输入一个定义域的值。返回一个值域的值。
log.invert - 反变换。输入值域值返回定义域值。
log.domain - get或set定义域。

log.range - get或set值域。
log.rangeRound - 设置值域，并对结果取整。
log.interpolate - get或set变换的插值函数。
log.clamp - 设置值域是否闭合，默认不闭合。

log.nice - 扩展定义域范围使定义域更规整。
log.ticks - 从定义域中取出有代表性的值。

通经常使用于坐标轴刻度的选取。

log.tickFormat - 获取格式转化函数，通经常使用于坐标轴刻度的格式转化。

log.copy - 从已有的变换中复制出一个变换。
d3.scale.quantize - 创建一个quantize线性变换,定义域为一个数值区间。值域为几个离散值。

quantize - 输入数值，返回离散值。

如： var q = d3.scale.quantize().domain([0, 1]).range(['a', 'b', 'c']); //q(0.3) === ‘a', q(0.4) === ‘b', q(0.6) === ‘b', q(0.7) ==='c;
quantize.invertExtent - 返回得到某个离散值的值域范围。

// q.invertExtent(‘a') 的结果为 [0, 0.3333333333333333]
quantize.domain - get或set变换的定义域。
quantize.range - get或set变换的值域。

quantize.copy - 从已有的变换中复制出一个变换。
d3.scale.threshold - 构建一个threshold(阈值)线性变换。

定义域为分隔值数值序列，值域为离散值。它与quantize的差别是quantize指定的值域为一个区间。然后均分这个区间为多个小区间，以相应各离散值。threshold则指定各小区间的边界分隔值。演示样例: var t = d3.scale.threshold().domain([0, 1]).range(['a', 'b', 'c']); t(-1) === ‘a'; t(0) === ‘b'; t(0.5) === ‘b'; t(1) === ‘c'; t(1000) === ‘c'; t.invertExtent(‘a'); //returns [undefined, 0] t.invertExtent(‘b'); //returns [0, 1] t.invertExtent(‘c'); //returns [1, undefined]
threshold - 输入数值，返回离散值。

threshold.invertExtent - 输入离散值。返回数值。
threshold.domain - get或set变换的定义域。
threshold.range - get或set变换的值域。

threshold.copy - 从已有的变换中复制出一个变换。
d3.scale.quantile - 构建一个quantile线性变换。用法与quantize全然类似。差别是quantile依据中位数来分隔区间，quantize依据算数平均值来分隔区间。

example
quantile - 输入数值。返回离散值。

quantile.invertExtent - 输入离散值，返回数值。

quantile.domain - get或set变换的定义域。
quantile.range - get或set变换的值域。

quantile.quantiles - 获得quantile变换的分隔值。演示样例： var q = d3.scale.quantile().domain([0, 1]).range(['a', 'b', 'c']); q.quantiles() returns [0.33333333333333326, 0.6666666666666665]
quantile.copy - 从已有的变换中复制出一个变换。

d3.scale.identity - 构建一个identity线性变换。特殊的linear线性变换。此变换定义域和值域同样，仅仅在一些d3内部的axis或brush模块中用到。
identity - identity线性变换函数。

返回输入值。
identity.invert - 和identity函数同样，返回输入值。
identity.domain - get或set变换的定义域。
identity.range - get或set变换的值域。
identity.ticks - 从定义域中取出有代表性的值。

通经常使用于坐标轴刻度的选取。

identity.tickFormat - 获取格式转化函数，通经常使用于坐标轴刻度的格式转化。

identity.copy - 从已有的变换中复制出一个变换。
序数变换（Ordinal）
d3.scale.ordinal - 构建一个ordinal变换对象。

ordinal变换的输入定义域和输出值域都是离散的。而quantitative变换的输入定义域是连续的。这是两者最大的不同。
ordinal - 输入一个离散值，返回一个离散值。不在当前定义域中的输入值会自己主动增加定义域。

ordinal.domain - get或set变换的定义域。

ordinal.range - get或set变换的值域。
ordinal.rangePoints - 用几个离散点来切割一个连续的区间。详情请看链接中的图例。
ordinal.rangeBands - 用几个离散区间来切割一个连续的区间。详情请看链接中的图例。
ordinal.rangeRoundBands - 用几个离散区间来切割一个连续的区间，区间边界和宽度会取整。详情请看链接中的图例。
ordinal.rangeBand - 获取离散区间的宽度。
ordinal.rangeExtent - 获取输出域的最小最大值。
ordinal.copy - 从已有的变换中复制出一个变换。
d3.scale.category10 - 用10种颜色构建一个ordinal变换。
d3.scale.category20 - 用20种颜色构建一个ordinal变换。
d3.scale.category20b - 用另外20种颜色构建一个ordinal变换。

d3.scale.category20c - 用另外20种颜色构建一个ordinal变换。

d3.svg (SVG)
Shapes
d3.svg.line - 创建一个线段生成器.
line - 在折线图里生成一段折线.
line.x - 设置或获取x轴訪问器.
line.y - 设置或获取y轴訪问器
line.interpolate - 设置或获取插值模式.
line.tension - 获取或设置曲线张力訪问器(cardinal spline tension).
line.defined - 定义线条在某一点是否存在.
d3.svg.line.radial - 创建辐射线生成器.
line - 生成分段的线性曲线。用于纬度线／雷达线图表.
line.radius - 获取或设置radius訪问器.
line.angle - 获取或设置angle訪问器.
line.defined - 设置或获取线条定义存取器.
d3.svg.area - 创建一个新的区域生成器.
area - 生成一个线性的区域,用于区域图表.
area.x - 获取或设置x坐标的訪问器.
area.x0 - 获取或设置x0坐标(基线)的訪问器.
area.x1 - 获取或设置x1坐标(背线)的訪问器.
area.y - 获取或设置y坐标的訪问器.
area.y0 - 获取或设置y0坐标(基线)的訪问器.
area.y1 - 获取或设置y1坐标(背线)的訪问器.
area.interpolate - 获取或设置插值模式.
area.tension - 获取或设置张力訪问器(the cardinal spline tension).
area.defined - 推断获取或定义区域定义存取器.
d3.svg.area.radial - 创建新的区域生成器.
area - 生成分段的线性区域,用于纬度/雷达图表.
area.radius - 获取或设置radius訪问器.
area.innerRadius - 获取或设置内部的radius(基线)訪问器.
area.outerRadius - 获取或设置外部的radius(背线)訪问器.
area.angle - 获取或设置angle訪问器.
area.startAngle - 获取或设置内部的angle(基线)訪问器.
area.endAngle - 获取或设置外部的angle(背线)訪问器.
area.defined - 推断获取或定义区域定义存取器.
d3.svg.arc - 创建弧度生成器.
arc - 生成一个线性弧度,用于饼图或甜甜圈图.
arc.innerRadius - 获取或设置内部的半径訪问器.
arc.outerRadius - 获取或设置外部的半径訪问器.
arc.startAngle - 获取或设置起始角度訪问器.
arc.endAngle - 获取或设置结束角度訪问器.
arc.centroid - 计算弧的重心点.
d3.svg.symbol - 创建符号生成器.
symbol - 生成指定的符号,用于散列图.
symbol.type - 获取或设置符号类型訪问器.
symbol.size - 获取或设置符号尺寸(in square pixels) 訪问器.
d3.svg.symbolTypes - 被支持的符号类型数组.
d3.svg.chord - 创建新的弦生成器.
chord - 生成一个二次贝塞尔曲线连接两个弧, 用于弦图.
chord.radius - 获取或设置弧半径訪问器.
chord.startAngle - 获取或设置弧起始角度訪问器.
chord.endAngle - 获取或设置弧结束角度訪问器.
chord.source - 获取或设置源弧度訪问器.
chord.target - 获取或设置目标弧度訪问器.
d3.svg.diagonal - 创建新的斜线生成器.
diagonal - 生成一个二维贝塞尔连接器, 用于节点连接图.
diagonal.source - 获取或设置源点訪问器.
diagonal.target - 获取或设置目标点訪问器.
diagonal.projection - 获取或设置一个可选的点变换器.
d3.svg.diagonal.radial - 创建一个新的斜线生成器.
diagonal - 创建一个二维贝塞尔连接器,用于节点连接图.
坐标轴(Axes)
d3.svg.axis - 创建一个axis生成器。

axis - 正式在页面中生成axis。
axis.scale - get或set坐标轴的scale尺度变换，该尺度变换设定了数值和像素位置的转换规则。

axis.orient - get或set坐标轴刻度方向。
axis.ticks - 控制坐标轴刻度的产生方式。
axis.tickValues - 设置特定的坐标轴的值。
axis.tickSize - 指定坐标轴上刻度线的像素长度。

axis.innerTickSize - get或set坐标轴小刻度线的像素长度。
axis.outerTickSize - get或set坐标轴大刻度线的像素长度。
axis.tickPadding - 指定坐标轴刻度和刻度文字之间的像素距离。
axis.tickFormat - 设置刻度文字的格式。

Controls
d3.svg.brush - 点击拖拽选择一个二维区域。
brush - 在页面中某个区域中正式绑定一个brush。
brush.x - get或set brush的x变换,用于水平方向的拖拽。
brush.y - get或set brush的y变换,用于垂直方向的拖拽。
brush.extent - get或set brush的选取范围（extent）。
brush.clear - 设置brush的选取范围（extent）为空。

brush.empty - 推断brush的选取范围（extent）是否为空。

brush.on - get或set brush的事件监听器。可监听3种事件：brushstart, brush, brushend。

brush.event - 通过程序触发监听事件。在通过程序设置extent后使用。
d3.time (Time)
时间格式转换(Time Formatting)
d3.time.format - 创建基于某种时间格式的本地时间格式转换器。

format - 将一个date对象转换成特定时间格式的字符串。
format.parse - 将特定时间格式的字符串转换成date对象。

d3.time.format.utc - 创建基于某种时间格式的世界标准时间（UTC）格式转换器。
d3.time.format.iso - 创建基于某种时间格式的ISO世界标准时间（ISO 8601 UTC）格式转换器。
时间变换(Time Scales)
d3.time.scale - 创建一个线性时间变换。定义域为数值区间，值域为时间区间。

经常使用于时间坐标轴的创建。详情可參考d3.scale.linear。
scale - 输入为一个数值，返回为一个时间。
scale.invert - 反变换，输入时间返回数值。
scale.domain - get或set变换的定义域。
scale.nice - 扩展定义域范围使定义域更规整。

scale.range - get或set变换的值域。
scale.rangeRound - 设置值域，并对结果取整。
scale.interpolate - get或set变换的插值函数，如将默认的线性插值函数替换成指数插值函数。

scale.clamp - 设置值域是否闭合，默认不闭合。当值域闭合时，假设插值结果在值域之外。会取值域的边界值。详情參考linear.clamp。
scale.ticks - 从定义域中取出有代表性的值。通经常使用于坐标轴刻度的选取。
scale.tickFormat - 获取格式转化函数，通经常使用于坐标轴刻度的格式转化。
scale.copy - 从已有的时间变换中复制出一个变换。

Time Intervals
d3.time.interval - 返回一个对于本地时间时间间隔器.
interval - 效果同interval.floor方法.
interval.range - 返回指定区间内日期.
interval.floor - 下舍入到近期的间隔值.
interval.round - 上舍入或下舍入到近期的间隔值.
interval.ceil - 上舍入到近期的间隔值.
interval.offset - 返回指定时间间隔的日期偏移量.
interval.utc - 返回相应的UTC时间间隔.
d3.time.day - 返回指定时间基于天起始的时间(默认起始是12:00am).
d3.time.days - 返回指定时间区间和间隔条件的基于天的全部时间,效果同day.range.
d3.time.dayOfYear - 计算指定时间在年中的天数.
d3.time.hour - 返回指定时间基于小时起始的时间(e.g., 1:00 AM).
d3.time.hours - 返回指定时间区间和间隔条件的基于小时的全部时间, 效果同hour.range.
d3.time.minute - 返回指定时间基于分钟起始的时间 (e.g., 1:02 AM).
d3.time.minutes - 返回指定时间区间和间隔条件的基于分钟的全部时间,效果同minute.range.
d3.time.month - 返回指定时间基于月起始的时间(e.g., February 1, 12:00 AM).
d3.time.months - 返回指定时间区间和间隔条件的基于月的全部时间,效果同month.range.
d3.time.second - 返回指定时间基于秒起始的时间(e.g., 1:02:03 AM).
d3.time.seconds - 返回指定时间区间和间隔条件的基于秒的全部时间,效果同second.range.
d3.time.sunday - 返回指定时间基于Sunday起始的时间(e.g., February 5, 12:00 AM).
d3.time.sundays - 返回指定时间区间和间隔条件的基于sunday的全部时间, 效果同sunday.range.
d3.time.sundayOfYear - 计算以sunday为基点的指定时间在一年中的周数.
d3.time.monday - every Monday (e.g., February 5, 12:00 AM).
d3.time.mondays - alias for monday.range.
d3.time.mondayOfYear - computes the monday-based week number.
d3.time.tuesday - every Tuesday (e.g., February 5, 12:00 AM).
d3.time.tuesdays - alias for tuesday.range.
d3.time.tuesdayOfYear - computes the tuesday-based week number.
d3.time.wednesday - every Wednesday (e.g., February 5, 12:00 AM).
d3.time.wednesdays - alias for wednesday.range.
d3.time.wednesdayOfYear - computes the wednesday-based week number.
d3.time.thursday - every Thursday (e.g., February 5, 12:00 AM).
d3.time.thursdays - alias for thursday.range.
d3.time.thursdayOfYear - computes the thursday-based week number.
d3.time.friday - every Friday (e.g., February 5, 12:00 AM).
d3.time.fridays - alias for friday.range.
d3.time.fridayOfYear - computes the friday-based week number.
d3.time.saturday - every Saturday (e.g., February 5, 12:00 AM).
d3.time.saturdays - alias for saturday.range.
d3.time.saturdayOfYear - computes the saturday-based week number.
d3.time.week - alias for sunday.
d3.time.weeks - alias for sunday.range.
d3.time.weekOfYear - alias for sundayOfYear.
d3.time.year - 返回指定时间基于年起始的时间(e.g., January 1, 12:00 AM).
d3.time.years - 返回指定时间区间和间隔条件的全部时间,效果同year.range.
构图(d3.layout)
Bundle
d3.layout.bundle - construct a new default bundle layout.
bundle - apply Holten's hierarchical bundling algorithm to edges.
弦图(Chord)
d3.layout.chord - 初始化一个弦图对象, 返回一个 Chord 实例
chord.matrix - 设置或者获取弦图实例相应的矩阵数据
chord.padding - 设置或获取弦图各段圆弧之间的间隔角度
chord.sortGroups - 设置或获取矩阵分组的排序函数
chord.sortSubgroups - 设置或获取矩阵二级分组的排序函数
chord.sortChords - 设置或获取弦图在z序上的排序函数(决定哪一组显示在最上层)
chord.chords - 该函数会将參数处理成对 chord 更友好的格式并返回, 若没有提供參数, 会调用matrix()来获取数据
chord.groups - 该函数參数处理成更易于理解的分组信息, 若没有提供參数, 会调用matrix()来获取数据
集群(Cluster)
d3.layout.cluster - 用默认设置生成一个集群布局对象.
cluster.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)的排序.
cluster.children - 获取或设置子结点的訪问器.
cluster.nodes - 计算并返回指定结点的子结点在集群中的信息(坐标,深度等).
cluster.links - 指定一个子结点数组(一般是nodes函数返回值), 计算它们与父结点的连接信息.
cluster.separation - 获取或设置相邻结点间的间隔(不仅限于兄弟结点).
cluster.size - 获取或设置布局的 宽 和 高 的大小.
cluster.nodeSize - 为结点指定大小.
力学(Force)
d3.layout.force -节点（node）基于物理模拟的位置连接。
force.on - 监听布局位置的变化。

(仅支持”start”,”step”,”end”三种事件)
force.nodes - 获得或设置布局中的节点（node）阵列组。
force.links - 获得或设置布局中节点间的连接（Link）阵列组。

.
force.size - 获取或设置布局的 宽 和 高 的大小.
force.linkDistance - 获取或设置节点间的连接线距离.
force.linkStrength - 获取或设置节点间的连接强度.
force.friction - 获取或设置摩擦系数.
force.charge - 获取或设置节点的电荷数.(电荷数决定结点是互相排斥还是吸引)
force.gravity - 获取或设置节点的引力强度.
force.theta - 获取或设置电荷间互相作用的强度.
force.start - 开启或恢复结点间的位置影响.
force.resume - 设置冷却系数为0.1,并又一次调用start()函数.
force.stop - 立马终止结点间的位置影响.(等同于将冷却系数设置为0)
force.alpha - 获取或设置布局的冷却系数.(冷却系数为0时,节点间不再互相影响)
force.tick - 让布局执行到下一步.
force.drag - 获取当前布局的拖拽对象实例以便进一步绑定处理函数.
层级布局(Hierarchy)
d3.layout.hierarchy - 获得一个自己定义的层级布局的实现.
hierarchy.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)的排序.
hierarchy.children - 获取或设置子结点的訪问器.
hierarchy.nodes - 计算并返回指定结点的子结点信息.
hierarchy.links - 指定一个子结点数组(一般是nodes函数返回值), 计算它们与父结点的连接信息.
hierarchy.value - 获取或设置结点的值訪问器.
hierarchy.revalue - 又一次计算层级布局.
直方图(Histogram)
d3.layout.histogram - 构建一个默认直方图(用来表示一组离散数字的分布,横轴表示区间,纵轴表示区间内样本数量或样本百分比).
histogram.value - 获取或设置值訪问器.
histogram.range - 获取或设置合法值范围.
histogram.bins - 指定怎样将数据分组到不同的区间(bin)里, 返回一个构造函数 .
histogram - 依据已设置的区间将数据分组,返回已分组的二维数组(compute the distribution of data using quantized bins).
histogram.frequency - 设置直方图Y轴值是区间内数据的总量还是百分比(compute the distribution as counts or probabilities).
层包(Pack)
d3.layout.pack - 用递归的圆环表现一个多层级布局.
pack.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)排序.
pack.children - 获取或设置子结点的訪问器.
pack.nodes - 计算并返回指定结点的子结点信息.
pack.links - 指定一个子结点数组(一般是nodes函数返回值), 计算它们与父结点的连接信息.
pack.value - 获取或设置一个函数, 用来计算圆环的大小(近似值).
pack.size - 设置整个布局画布的 宽 and 高.
pack.radius - 假设不想结点半径与结点的值同样, 能够传入一个函数用来计算结点半径.
pack.padding - 指定相邻结点之点的间距(近似值).
分区(Partition)
d3.layout.partition - 将一棵树递归的分区.
partition.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)排序.
partition.children - 获取或设置子结点的訪问器.
partition.nodes - 计算并返回指定结点的子结点信息.
partition.links - 指定一个子结点数组(一般是nodes函数返回值), 计算它们与父结点的连接信息.
partition.value - 设置一个函数来来计算分区的值.
partition.size - 设置整个布局画布的 宽 and 高.
饼图(Pie)
d3.layout.pie - 构建一个默认的饼图.
pie - 该函数将传入的原始參数转换成可用于饼图或者环形图的数据结构.
pie.value - 获取或设置值訪问器.
pie.sort - 设置饼图顺时针方向的排序方法.
pie.startAngle - 设置或获取整个饼图的起始角度.
pie.endAngle - 设置或获取整个饼图的终止角度.
堆叠图(Stack)
d3.layout.stack - 构建一个默认的堆叠图(用来展示一系列x轴同样的面积图或者立方图).
stack - 计算每一层的基线.
stack.values - 设置或者获取每层的值訪问器.
stack.order - 设置每层的排序.
stack.offset - 指定总的基线算法.
stack.x - 设置或获取每层的x轴訪问器.
stack.y - 设置或获取每层的y轴訪问器.
stack.out - 设置或获取用来储存基线的输出函数.
树(Tree)
d3.layout.tree - position a tree of nodes tidily.
tree.sort - 设置或获取一个函数, 用来给兄弟节点(同一父结点的子结点)排序.
tree.children - 设置或获取子结点的訪问器.
tree.nodes - 计算并返回指定结点的子结点信息.
tree.links - 指定一个子结点数组(一般是nodes函数返回值), 计算它们与父结点的连接信息.
tree.separation - 设置或获取相隔结点之间的间隔计算函数.
tree.size - 指定整个布局的宽和高.
tree.nodeSize - 给所有结点指定一个固定的大小(会导致tree.size失效).
矩阵树(Treemap)
d3.layout.treemap - 返回一个矩阵树对象(用矩阵来展示一颗树).
treemap.sort - 设置或获取一个函数, 用来给兄弟节点(同一父结点的子结点)排序.
treemap.children - 设置或获取子结点的訪问器.
treemap.nodes - 计算并返回指定结点的子结点信息.
treemap.links - 指定一个子结点数组(一般是nodes函数返回值), 计算它们与父结点的连接信息.
treemap.value - 设置或获取一个用来计算单元格大小的值訪问器.
treemap.size - 指定整个布局的宽和高.
treemap.padding - 指定父结点和子结点的间距.
treemap.round - 禁用或启用边界补偿.
treemap.sticky - 让布局更”粘”以保证在更新数据时有平滑的动画效果.
treemap.mode - 更改矩阵树的布局算法.
d3.geo (Geography)
Paths
d3.geo.path - 创建一个新的地理路径生成器.
path - 投射指定的特性而且渲染到上下文.
path.projection - 获取活设置地理投影.
path.context - 获取活设置渲染上下文.
path.pointRadius -获取或设置半径去现实点的特性.
path.area - 计算指定特性的投射区域.
path.centroid - 计算指定特性的投射重心点.
path.bounds - 计算指定特性的投射边界.
d3.geo.graticule - 创建地理坐标网生成器.
graticule - 生产一个子午线或平行线的MultiLineStrings.
graticule.lines - 生成一个子午线和平行线的LineString的数组.
graticule.outline - 生成一个表示该坐标网的外框多边形.
graticule.extent - 获取或设置基本的和次要的范围.
graticule.majorExtent - 获取或设置主要范围.
graticule.minorExtent - 获取或设置次要范围.
graticule.step - 获取或设置主要和次要的步间隔.
graticule.majorStep - 获取或设置基本的步间隔.
graticule.minorStep - 获取或设置次要的步间隔.
graticule.precision - 设置或者获取横向精度.
d3.geo.circle - 创建一个圆形的生成器.
circle - 使用多边形来生成一个分段的圆形.
circle.origin - 通过横向和纵向坐标来指定原点.
circle.angle - 指定以度为单位的角半径.
circle.precision - 指定分段圆的精度.
d3.geo.area - 依据给定特征计算球面面积.
d3.geo.bounds - compute the latitude-longitude bounding box for a given feature.
d3.geo.centroid - compute the spherical centroid of a given feature.
d3.geo.distance - compute the great-arc distance between two points.
d3.geo.interpolate - interpolate between two points along a great arc.
d3.geo.length - compute the length of a line string or the circumference of a polygon.
d3.geo.rotation - create a rotation function for the specified angles [λ, φ, γ].
rotation - rotate the given location around the sphere.
rotation.invert - inverse-rotate the given location around the sphere.
Projections
d3.geo.projection - create a standard projection from a raw projection.
projection - project the specified location.
projection.invert - invert the projection for the specified point.
projection.rotate - get or set the projection's three-axis rotation.
projection.center - get or set the projection's center location.
projection.translate - get or set the projection's translation position.
projection.scale - get or set the projection's scale factor.
projection.clipAngle - get or set the radius of the projection's clip circle.
projection.clipExtent - get or set the projection's viewport clip extent, in pixels.
projection.precision - get or set the precision threshold for adaptive resampling.
projection.stream - wrap the specified stream listener, projecting input geometry.
d3.geo.projectionMutator - create a standard projection from a mutable raw projection.
d3.geo.albers - the Albers equal-area conic projection.
albers.parallels - get or set the projection's two standard parallels.
d3.geo.albersUsa - a composite Albers projection for the United States.
d3.geo.azimuthalEqualArea - the azimuthal equal-area projection.
d3.geo.azimuthalEquidistant - the azimuthal equidistant projection.
d3.geo.conicConformal - the conic conformal projection.
d3.geo.conicEquidistant - the conic equidistant projection.
d3.geo.conicEqualArea the conic equal-area (a.k.a. Albers) projection.
d3.geo.equirectangular - the equirectangular (plate carreé) projection.
d3.geo.gnomonic - the gnomonic projection.
d3.geo.mercator - the spherical Mercator projection.
d3.geo.orthographic - the azimuthal orthographic projection.
d3.geo.stereographic - the azimuthal stereographic projection.
d3.geo.azimuthalEqualArea.raw - the raw azimuthal equal-area projection.
d3.geo.azimuthalEquidistant.raw - the azimuthal equidistant projection.
d3.geo.conicConformal.raw - the raw conic conformal projection.
d3.geo.conicEquidistant.raw - the raw conic equidistant projection.
d3.geo.conicEqualArea.raw the raw conic equal-area (a.k.a. Albers) projection.
d3.geo.equirectangular.raw - the raw equirectangular (plate carrée) projection.
d3.geo.gnomonic.raw - the raw gnomonic projection.
d3.geo.mercator.raw - the raw Mercator projection.
d3.geo.orthographic.raw - the raw azimuthal orthographic projection.
d3.geo.stereographic.raw - the raw azimuthal stereographic projection.
d3.geo.transverseMercator.raw - the raw transverse Mercator projection.
Streams
d3.geo.stream - convert a GeoJSON object to a geometry stream.
stream.point - indicate an x, y (and optionally z) coordinate.
stream.lineStart - indicate the start of a line or ring.
stream.lineEnd - indicate the end of a line or ring.
stream.polygonStart - indicate the start of a polygon.
stream.polygonEnd - indicate the end of a polygon.
stream.sphere - indicate a sphere.
d3.geo.transform - transform streaming geometries.
transform.stream - wraps a given stream.
d3.geo.clipExtent - a stream transform that clips geometries to a given axis-aligned rectangle.
clipExtent.extent - sets the clip extent.
d3.geom (Geometry)
Voronoi
d3.geom.voronoi - create a Voronoi layout with default accessors.
voronoi - compute the Voronoi tessellation for the specified points.
voronoi.x - get or set the x-coordinate accessor for each point.
voronoi.y - get or set the y-coordinate accessor for each point.
voronoi.clipExent - get or set the clip extent for the tesselation.
voronoi.links - compute the Delaunay mesh as a network of links.
voronoi.triangles - compute the Delaunay mesh as a triangular tessellation.
Quadtree
d3.geom.quadtree - constructs a quadtree for an array of points.
quadtree.add - add a point to the quadtree.
quadtree.visit - recursively visit nodes in the quadtree.
Polygon
d3.geom.polygon - create a polygon from the specified array of points.
polygon.area - compute the counterclockwise area of this polygon.
polygon.centroid - compute the area centroid of this polygon.
polygon.clip - clip the specified polygon to this polygon.
Hull
d3.geom.hull - create a convex hull layout with default accessors.
hull - compute the convex hull for the given array of points.
hull.x - get or set the x-coordinate accessor.
hull.y - get or set the y-coordinate accessor.
d3.behavior (Behaviors)
Drag
d3.behavior.drag
drag.origin
drag.on
缩放 Zoom
d3.behavior.zoom - 创建一个缩放行为.
zoom - 对指定元素应用缩放.
zoom.scale - the current scale factor.
zoom.translate - the current translate offset.
zoom.scaleExtent - optional limits on the scale factor.
zoom.center - an optional focal point for mousewheel zooming.
zoom.size - the dimensions of the viewport.
zoom.x - an optional scale whose domain is bound to the x extent of the viewport.
zoom.y - an optional scale whose domain is bound to the y extent of the viewport.
zoom.on - listeners for when the scale or translate changes.
zoom.event - dispatch zoom events after setting the scale or translate.

D3、EChart、HighChart绘图demol的更多相关文章

  1. D3树状图异步按需加载数据

    D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...

  2. 基于canvas实现的高性能、跨平台的股票图表库--clchart

    什么是 ClChart? ClChart是一个基于canvas创建的简单.高性能和跨平台的股票数据可视化开源项目.支持PC.webApp以及React Native和Weex等平台.在React Na ...

  3. 性能报告之HTML5 性能测试报告

    1. 引言 1.1. 编写目的 HTML5 作为当前"最火"的跨平台.跨终端(硬件)开发语言,越来越受到前端开发者 的重视,无论是 PC 端还是当前"火热"的移 ...

  4. React+Webpack+ES6环境搭建(自定义框架)

    引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...

  5. 图表库 - Highchart / Echart

    当前主要使用HighChart和Echart图表库,都基于Jquery,需要先引用Jquery. 实际问题:引入Jquery需在图表库前,否则报错. HighChart官网:https://www.h ...

  6. 软件推荐-c#绘图插件echart

    首先给出官网:http://echarts.baidu.com/examples/ 简单的教程:http://www.cnblogs.com/youmeng/p/4874897.html

  7. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  8. [js]d3.js绘制拓扑树

    echart也支持拓扑树了 所需的json数据格式: children嵌套 vis.js也支持绘制拓扑树 数据格式: nodes: {id, label, title} edges: {from, t ...

  9. echarts+php+mysql 绘图实例

    最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...

随机推荐

  1. Android分组子级的不同视图布局之BUG奇遇记

    Android分组子级的不同视图布局之BUG奇遇记 最近在使用按日期分类列表,二级条目可能不一样,于是就想到了ExpandableListView. ExpandableListView的布局显示分割 ...

  2. eclipse maven jdk全局设置

    <profile> <id>jdk-1.8</id> <activation> <activeByDefault>true</acti ...

  3. Kafka中的zookeeper-shell.sh

    连接 zookeeper bin/zookeeper-shell. 常用命令 connect host:port get path [watch] ls path [watch] set path d ...

  4. js便签笔记（10） - 分享：json2.js源码解读笔记

    1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...

  5. 单例模式——java设计模式

    单例模式 目录: 一.何为单例 二.使用Java EE实现单例模式 三.使用场景 一.何为单例 确保一个类只有一个实例,并且提供了实例的一个全局访问点 1.1 单例模式类图               ...

  6. Solidity中如何判断mapping中某个键是否为空呢？

    Solidity中如何判断mapping中某个键是否为空呢? 一.比较标准的做法是建立一个专门和value相关的结构体,用一个布尔型变量来看是否这个key所对应的value被赋过值 代码如下: pra ...

  7. 【详解】ThreadPoolExecutor源码阅读（三）

    系列目录 [详解]ThreadPoolExecutor源码阅读(一) [详解]ThreadPoolExecutor源码阅读(二) [详解]ThreadPoolExecutor源码阅读(三) 线程数量的 ...

  8. 如何精准实现OCR文字识别？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云计算基础发表于云+社区专栏 前言 2018年3月27日腾讯云云+社区联合腾讯云智能图像团队共同在客户群举办了腾讯云OCR文字识别-- ...

  9. 笨方法学python学习笔记

    创建于:2016-02-29 更新于:03-02 python版本:2.7 %r 用来做 debug 比较好,因为它会显示变量的原始数据(raw data),而其它的符号则是用来向用户展示输出的: 每 ...

  10. Prometheus+Grafana打造Mysql监控平台

    prometheus/node_exporter/mysqld_exporter都是由go语言编写,需要先安装GoLang环境 下载node_exporter(监控服务器的CPU.内存.存储使用情况) ...