颜色
RGB、HSL
var color1 = d3.rgb(40, 80, 0);
var color2 = d3.rgb('hsl(40, 80, 0)');
var color3 = d3.rgb('rgb(40, 80, 0)');
var color4 = d3.rgb('#FF0000');
var color5 = d3.rgb('#fcc');
var color6 = d3.rgb('red');
// 颜色变的更亮，返回新的颜色对象
color1.brighter(2);
// 颜色变的更暗，返回新的颜色对象
color2.darker(2);
// 返回该颜色值对应的HSL值
console.log(color4.hsl()); // {h: 0, s: 1, l: 0.5}
// 以字符串形式返回颜色值
console.log(color6.toString()); // #ff0000
// HSL
var color7 = d3.hsl(120, 8, 0.5);
color7.brighter(2);
color7.darker(2);
console.log(color7.rgb()); // {r: 0, g: 255, b: 0}
console.log(color7.toString()); // #00ff00插值
var color1 = d3.rgb(0, 255, 0); // 绿色
var color2 = d3.rgb('#FF0000'); // 红色
var compute = d3.interpolate(color1, color2); // 插值处理
// <= 0 的时候返回第一个颜色值
console.log(compute(0)); // #00ff00
// >= 1 的时候返回最后一个颜色值
console.log(compute(1)); // #ff0000
// 0 - 1 区间中取值
console.log(compute(0.3)); // #4db300线段生成器
方式一
<body>
<svg>
<line x1="20" y1="20" x2="300" y2="100" />
<path d="M20,20L400,200" />
</svg>
</body>方式二
svg.append('line')
.attr({
'x1': 20,
'y1': 20,
'x2': 300,
'y2': 300
});
svg.append('path')
.attr('d', 'M20,20L400,200');方式三
var svg = d3.select('body')
.append('svg')
.attr({
'width': 300,
'height': 300
})
.style({
'background-color': '#404a58'
});
var lines = [[20,20],[200,100],[200,200],[100,200]];
// 创建一个线段
var linePath = d3.svg.line()
// 设置线段 x 坐标
.x(function(d){
return d[0]
})
// 设置线段 y 坐标
.y(function(d, i){
return i % 2 === 0 ? 40 : 120;
})
/*
linear -分段线性片段，如折线。
linear-closed –闭合直线段，以形成一个多边形。
step - 水平和垂直段之间交替，如在step函数中。
step-before -垂直和水平段之间交替，如在step函数中。
step-after -水平和垂直段之间交替，如在step函数中。
basis - B样条曲线(B-spline)，在两端的控制点的重复。
basis-open – 开放B样条曲线，首尾不会相交。
basis-closed -封闭B样条曲线，如在一个循环。
bundle – 等价于basis, 除了使用tension参数拉直样条曲线。
cardinal – 基本样条曲线(Cardinal spline)，在末端控制点的重复。
cardinal-open –开放的基本样条曲线，首尾不会相交，但和其他控制点相交。
cardinal-closed -封闭基本样条曲线，如在一个循环。
monotone - 三次插值(cubic interpolation)，可以保留y的单调性。
*/
// 设置线段的插值模式
.interpolate('cardinal')
// 设置张力系数 取值范围0-1 | 0 最大 1 最小
.tension(0)
// 获取一个访问器，判断为存在的数据才会显示
.defined(function(d){
return d[0] < 201;
});
svg.append('path')
.attr({
'd': linePath(lines), // 使用线段生成器
'stroke': 'black',
'stroke-width': '3px',
'fill': 'none'
});区域生成器
var height = 300;
var width = 500;
var svg = d3.select('body')
.append('svg')
.attr({
'width': width,
'height': height
})
.style({
'background-color': '#404a58'
});
var dataset = [80, 120, 130, 70, 60, 90];
// 创建一个区域
var areaPath = d3.svg.area()
.x(function(d, i){
return 50 + i * 80;
})
.y0(function(d, i){
return height / 2;
})
.y1(function(d, i){
return height / 2 - d;
})
.interpolate('cardinal')
.tension(0);
svg.append('path')
.attr({
'd': areaPath(dataset),
'stroke': 'black',
'stroke-width': '3px',
'fill': 'yellow'
});弧生成器
var height = 500;
var width = 500;
var svg = d3.select('body')
.append('svg')
.attr({
'width': width,
'height': height
})
.style({
'background-color': '#2c343c'
});
var dataset = [
// 起始角度 终止角度
{startAngle: 0, endAngle: Math.PI * 0.6},
{startAngle: Math.PI * 0.6, endAngle: Math.PI},
{startAngle: Math.PI, endAngle: Math.PI * 1.7},
{startAngle: Math.PI * 1.7, endAngle: Math.PI * 2},
];
// 创建一个弧生成器
var arcPath = d3.svg.arc()
// 内半径
.innerRadius(40)
// 外半径
.outerRadius(100);
// 生成 10 个颜色
var colors = d3.scale.category10();
// 弧
svg.selectAll('path')
.data(dataset)
.enter()
.append('path')
.attr({
'd': function(d) {
return arcPath(d);
},
'transform': 'translate(250, 250)',
'stroke-width': '1px',
'fill': function(d, i){
return colors(i);
}
});
// 文字
svg.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr({
'd': function(d) {
return arcPath(d);
},
'transform': function(d){
return 'translate(250, 250)' + 'translate('+arcPath.centroid(d)+')';
},
'text-anchor': 'middle',
'fill': function(d, i){
return colors(i);
},
'font-size': '18px'
})
.text(function(d){
return Math.floor((d.endAngle - d.startAngle) * 180 / Math.PI) + '°';
});符号生成器
var height = 500;
var width = 500;
var svg = d3.select('body')
.append('svg')
.attr({
'width': width,
'height': height
})
.style({
'background-color': '#2c343c'
});
var dataset = [];
// 创建一个弧生成器
var symbol = d3.svg.symbol()
// 内半径 w 10, h 10
.size(500)
// 设置生成符号的类型
// 圆形， 加号， 菱形， 正方形， 向下三角， 向上三角
// ["circle", "cross", "diamond", "square", "triangle-down", "triangle-up"]
.type('triangle-up');
svg.append('path')
.attr({
'd': symbol,
'transform': 'translate(250, 250)'
});
// 支持的符号类型
console.log(d3.svg.symbolTypes);
// ["circle", "cross", "diamond", "square", "triangle-down", "triangle-up"]弦生成器
var height = 500;
var width = 500;
var svg = d3.select('body')
.append('svg')
.attr({
'width': width,
'height': height
})
.style({
'background-color': '#2c343c'
});
// 创建一个弦生成器
var chord = d3.svg.chord()
// 半径
.radius(100)
// 起始弧
.source(0.2)
// 终止弧
.target(Math.PI)
// 起始角度
.startAngle(Math.PI * 0.7)
// 终止角度
.endAngle(Math.PI * 2);
svg.append('path')
.attr({
'd': chord(),
'transform': 'translate(250, 250)',
'fill': '#FFF',
});对角线生成器
var height = 500;
var width = 500;
var svg = d3.select('body')
.append('svg')
.attr({
'width': width,
'height': height
})
.style({
'background-color': '#2c343c'
});
var dataset = {
source: {
x: 10,
y: 100
},
target: {
x: 300,
y: 200
}
}
// 创建一个弦生成器
var diagonal = d3.svg.diagonal()
.projection(function(d){
var x = d.x * 1.5;
var y = d.y * 1.5;
return [x, y];
});
svg.append('path')
.attr({
'd': diagonal(dataset),
'fill': 'none',
'stroke': '#FFF',
'stroke-width': '3px'
});
