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)); // 设置最终状态