D3JS常用API

数组API

d3.min(数组)： 返回给定数组中的最小值.

d3.max(array)： 返回给定数组中的最大值

d3.extent(array)： 以数组形式返回给定数组中的最小值和最大值

d3.sum(数组)： 返回给定数组，元素的和

d3.mean(数组)： 返回给定数组的平均值

d3.merge(arrays)： 合并数组

d3.merge([[10], [20]]); // output is [10, 20] 

集合API

d3.keys(对象)： 以数组的形式返回对象的所有键

d3.values(object)： 以数组的形式返回对象的所有值

d3.entries(object) ： 以数组的形式返回对象的键和值

选择API

d3.select(selector)： 用于选择与指定选择器字符串匹配的第一个元素

d3.selectAll(selector)： 选择与指定选择器字符串匹配的所有元素.

selection.filter(过滤器)： 用于过滤选择，返回包含的新选择只有指定过滤器为真的元素.

//过滤一系列表行只返回奇数. var even = d3.selectAll("tr").filter(":nth-child(odd) "); 

路径API

d3.path() : 此方法用于创建新路径.

path.moveTo(x，y) : 此方法用于移动指定的x和y值.

path.closePath() : 此方法用于关闭当前路径.

path.lineTo(x，y) : 此方法用于创建从当前点到定义的x，y值的线.

path.quadraticCurveTo(cpx，cpy，x，y ) : 此方法用于绘制从当前点到指定点的二次曲线.

path.bezierCurveTo(cpx1，cpy1，cpx2，cpy2， x，y) : 此方法用于绘制从当前点到指定点的贝塞尔曲线.

path.arcTo(x1，y1，x2，y2，radius) : 此方法用于从当前点到指定点(x1，y1)绘制圆弧，并结束指定点(x1，y1)和(x2，y2)之间的直线.

path.arc(x，y，radius，startAngle，endAngle [，anticlockwise]) : 此方法用于将圆弧绘制到指定的中心(x，y)，半径，startAngle和endAngle.如果逆时针值为真，则弧沿逆时针方向绘制，否则沿顺时针方向绘制.

path.rect(x ，y，w，h) : 该方法用于创建仅包含四个点(x，y)，(x + w，y)，(x + w，y + h)，(x，y + h)的新子路径.通过这些由直线连接的四个点将子路径标记为闭合.相当于context.rect并使用SVG的”lineto”命令.

path.toString() : 根据SVG的路径数据规范返回此路径的字符串表示形式.

形状API

圆弧

d3.arc() : ;此方法用于创建新的圆弧生成器.
arc(args) : 它用于生成具有指定给定参数的弧.具有对象半径和角度的默认设置定义如下.

<script> var arc = d3.arc(); arc({ 
    //内弧半径 innerRadius: 0, //外弧半径 outerRadius: 100, //起始角度 startAngle: 0, //结束角度 endAngle: Math.PI / 2 }); </script> 

arc.centroid(args) : 此方法用于计算具有指定参数的圆弧中心线的中点[x，y].
arc.innerRadius([半径]) : 此方法用于设置给定半径的内半径并返回弧生成器.它定义如下 :
arc.outerRadius([radius]) : 此方法用于设置给定半径的外半径并返回一个弧生成器.它定义如下.

arc.startAngle([角度]) : 此方法用于从给定角度设置函数的起始角度.它定义如下 :

function startAngle(d) { 
    return d.startAngle; } 

arc.endAngle([angle]) : 此方法用于从给定角度设置函数的结束角度.它定义如下.

function endAngle(d) { 
    return d.endAngle; } 

示例1

// 创建一个svg let svg = d3.select('#abc').append('svg').attr('width',200).attr('height',400); // 创建一个弧的路径 let arcPath = d3.arc().innerRadius(50).outerRadius(100); // 通过颜色比例尺获取颜色 let color = d3.scaleOrdinal(d3.schemeCategory10); // 弧的角度 let data = { 
   startAngle: 0,endAngle: Math.PI * 0.75}; // 往svg中添加路径 svg.append('path') .attr('d',arcPath(data)) .attr('transform','translate(50,120)') .attr('stroke','black') // 描边 .attr('stroke-width','3px') // 宽度 .attr('fill',(d,i) => color(i)); 

示例2

// 创建一个svg let svg = d3.select('#abc').append('svg').attr('width',200).attr('height',400); // 创建一个弧的路径 let arcPath = d3.arc().innerRadius(20).outerRadius(50); // 通过颜色比例尺获取颜色 let color = d3.scaleOrdinal(d3.schemeCategory10); // 弧的角度 let data = [ { 
   startAngle: 0,endAngle: Math.PI * 0.5}, { 
   startAngle: Math.PI * 0.5,endAngle: Math.PI * 1}, { 
   startAngle: Math.PI * 1,endAngle: Math.PI * 1.5}, { 
   startAngle: Math.PI * 1.5,endAngle: Math.PI * 2} ]; // 往svg中添加路径 svg.selectAll('path') // 获取所有路径 .data(data) .enter() .append('path') // 添加路径 .attr('d',d => arcPath(d)) .attr('transform','translate(60,120)') .attr('stroke','black') // 描边 .attr('stroke-width','3px') // 宽度 .attr('fill',(d,i) => color(i)); 

饼图

d3.pie() : 使用默认设置构造一个新的饼图生成器.

pie(参数)

pie([{ 
    index : 弧的索引. startAngle : 弧的起始角度. endAngle : 弧的结束角度. padAngle : 弧的垫角. }]) 

pie.value([value ]) : 此方法用于将值设置为指定的函数并生成饼图.

pie.startAngle([angle]) : 此方法用于将饼图的起始角度设置为指定的函数.如果未指定角度，则返回当前的起始角度.它的定义如下.

function startAngle() { 
    return 0; } 

pie.endAngle([angle]) : 此方法用于将饼图的结束角度设置为指定的函数.如果未指定角度，则返回当前结束角度.它定义如下.

function endAngle() { 
    return 2 * Math.PI; } 

pie.padAngle([angle]) : 此方法用于将填充角度设置为指定的函数并生成饼图.该函数定义如下.

function padAngle() { 
    return 0; } 

示例1

// 创建一个svg let svg = d3.select('#abc').append('svg').attr('width',300).attr('height',400); // 数据源 let chartData = [{ 
   label: 'a',value: 2},{ 
   label: 'b',value: 3},{ 
   label: 'c',value: 5}]; // 创建一个饼图生成器 let pie = d3.pie().value(d => d.value); // 饼图信息 let pieData = pie(chartData); // 生成一个弧 let arcPath = d3.arc().innerRadius(60).outerRadius(100); // 颜色 let color = (index) => { 
    let colors = ['red','blue','yellow']; return colors[index]; }; // 绘制饼图 svg.selectAll('path') .data(pieData) .enter() .append('path') .attr('d',d => arcPath(d)) // 设置路径值 .attr('stroke','blue') .attr('fill',(d,i) => color(i)) .attr('transform','translate(100,120)'); 

示例2

// 创建一个svg let svg = d3.select('#abc').append('svg').attr('width',350).attr('height',400); // 数据源 let data = [{ 
   label: '电影',value: 50},{ 
   label: '电视剧',value: 60},{ 
   label: '动漫',value: 100}]; // 颜色 let colors = ['#5c84f2','#C8D0E6','#dddddd']; // 创建一个饼图 let pie = d3.pie().value(d => d.value); // 饼图数据 let pieData = pie(data); // 创建饼图的弧路径 let arcPath = d3.arc().innerRadius(60).outerRadius(100); // 创建分组,每一组里保存一个扇形信息 let arcList = svg.selectAll('g') .data(pieData) .enter() .append('g') .attr('transform','translate(150,200)'); // 在组里添加路径 arcList.append('path') .attr('d',d => arcPath(d)) .attr('fill',(d,i) => colors[i]) .attr('stroke','black') .on('mouseover',function(e,d) { 
    d3.select(this) .attr('fill','#f8aba6'); }) // e是事件对象,d是数据对象 .on('mouseout',function(e,d) { 
    d3.select(this) .attr('fill',colors[d.index]); }); /* 上面的代码是绘制饼图,下面绘制饼图的文字 */ // 绘制扇形区域的数值 arcList.append('text') .attr('fill','white') .attr('text-anchor','middle') .attr('transform',function(d) { 
    // 获取弧的中线点 var x = arcPath.centroid(d)[0]; var y = arcPath.centroid(d)[1]; return 'translate(' + x + ',' + y + ')'; }) .text(d => d.value); // 绘制扇形区域对应的类型,就是线条加类型 arcList.append('line') .attr('stroke',(d,i) => colors[i]) .attr('x1',function(d) { 
    return arcPath.centroid(d)[0] * 1.34; }) .attr('y1',function(d) { 
    return arcPath.centroid(d)[1] * 1.34; }) .attr('x2',function(d) { 
    return arcPath.centroid(d)[0] * 1.8; }) .attr('y2',function(d) { 
    return arcPath.centroid(d)[1] * 1.8; }); arcList.append('text') .attr('fill',(d,i) => colors[i]) .attr('transform',function(d) { 
    var x = arcPath.centroid(d)[0] * 1.9; var y = arcPath.centroid(d)[1] * 1.9; return 'translate(' + x + ',' + y + ')'; }) .attr('text-anchor','middle') .text(d => d.data.label); 

颜色API

d3.hsl(颜色)： 将颜色值转换为HSL

HSL是一种将RGB色彩模型中的点在圆柱坐标系中的表示法。

var convert = d3.hsl("green "); //将色调旋转45度 convert.h + = 45; //修改透明度 convert.opacity = 0.5; 

d3.color(颜色)： 以对象的形式返回颜色rgba值

var color = d3.color("green"); 

color.opacity： 颜色透明度，读写一体，是属性不是方法

color.rgb(颜色)： 以对象的形式返回颜色rgba值

color.toString()： 以字符串形式返回颜色值

color.displayable()： 如果颜色可显示，则返回true.如果RGB颜色值小于0或大于255，或者不透明度不在[0,1]范围内，则返回false

d3.rgb(颜色)： 用于构造新的rgb颜色

 console.log(d3.rgb("yellow")); console.log(d3.rgb(200,100,0)); 

d3.hcl(颜色)： 构造一个新的HCL颜色.通道值在返回的实例上公开为h，c和l属性

拖动API

d3.drag()： 用于创建新的拖动.

selection.call()： 调用函数

drag.on(typenames，[listener])： 监听事件

示例

// 创建一个svg let svg = d3.select('#abc').append('svg').attr('width',300).attr('height',300) .append('g') .attr('transform', `translate(50,50)`); // 创建一个圆 let circle = svg.append('circle') .attr('r', 10) .attr('fill', 'red') .attr('cursor','pointer'); // 创建拖动 let drag = d3.drag() .on('start',() => { 
    console.log('拖动开始'); }) .on('end',() => { 
    console.log('拖动结束'); }) .on('drag',move); // 给圆添加拖动 circle.call(drag); function move(e) { 
    let { 
   x,y} = e; // console.log(e); d3.select(this) .attr('cx',x) .attr('cy',y); } 

缩放API

d3.zoom()： 创建一个缩放行为

zoom.scaleExtent([extent])： 设置缩放范围

示例1： 滑轮滚动缩放，鼠标按住平移（需要人为操作）

// 创建一个svg let svg = d3.select('#abc').append('svg').attr('width',300).attr('height',300) .append('g') .attr('transform', `translate(50,50)`); // 创建一个圆 let circle = svg.append('circle') .attr('r', 10) .attr('fill', 'red') .attr('cursor','pointer'); // 创建缩放对象 let zoom = d3.zoom() .scaleExtent([1,10]) // 设置缩放范围 .on('start',() => { 
    console.log('start'); }) .on('zoom',e => { 
    console.log(e); circle.attr('transform','scale(' + e.transform.k + ')') // 缩放 .attr('cx', e.transform.x).attr('cy', e.transform.y); // 平移 }) .on('end',() => { 
    console.log('end'); }); // 给圆添加缩放 circle.call(zoom); 

示例2： 自动缩放

// 创建一个svg let svg = d3.select('#abc').append('svg').attr('width',300).attr('height',300) .append('g') .attr('transform', `translate(50,50)`); // 创建一个圆 let circle = svg.append('circle') .attr('r', 10) .attr('fill', 'red') .attr('cursor','pointer'); // 创建缩放对象 let zoom = d3.zoom() .scaleExtent([1,10]) // 设置缩放范围 .on('start',() => { 
    console.log('start'); }) .on('zoom',e => { 
    console.log(e); circle.attr('transform','scale(' + e.transform.k + ')') // 缩放 .attr('cx', e.transform.x).attr('cy', e.transform.y); // 平移 }) .on('end',() => { 
    console.log('end'); }); // 给圆添加缩放 circle .transition().duration(2000) // 设置过度时间 .call(zoom.transform,d3.zoomIdentity.scale(5)); // 设置最终状态