使用D3制作图表_学习笔记

首页免费课使用D3制作图表笔记

使用D3制作图表

最热最新

霜花似雪

// JavaScript Document var width= 500, height = 250, margin = { left:50, top:30, right:20, bottom:20,} g_width = width - margin.left-margin.right, g_height = height - margin.top - margin.bottom; //SVG var svg=d3.select("#container") .append("svg") //width,height .attr("width",width) //attribute .连接每个元素 .attr("height",height) var g = d3.select("svg") .append("g") .attr("transform","translate("+ margin.left+","+margin.top+")") var data=[1,2,6,8,7,6] var scale_x = d3.scale.linear() .domain([0,data.length-1])//输入的范围 .range([0,g_width])//输出的范围 var scale_y = d3.scale.linear() .domain([0,d3.max(data)]) .range([0,g_height]) var line_generator=d3.svg.line() .x(function(d,i){return scale_x(i);})//0,1,2,3, .y(function(d){return scale_y(d);})//1,3,5 .interpolate("cardinal")//折线变曲线 d3.select("g") .append("path") .attr("d",line_generator(data))//d="M1,0L20,40L40,60L100,100L0,200",d-path data

查看全部

3 采集收起来源：绘制曲线
2018-03-22
慕勒6343746

V4 nterpolate("cardinal") -> curve(d3.curveCardinal); d3.svg.line() -> d3.line() d3.scale.linear() -> d3.scaleLinear()

查看全部

2 采集收起来源：绘制曲线
2018-03-22
Godtrue

对于JS库的学习，必须以良好的JS为基础，API+练习应该比较容易上手，这个视频听的不太好，东西比较多记不住，不过视频的目标是实现了（激发探索的兴趣），D3JS确实很棒，感谢制作者！

查看全部

2 采集收起来源：添加字母刻度的坐标轴
2015-01-20
狐小鱼 01:29

d3绘制曲线参数的说明：<path d="M1,0L20,40L40,50L100,100L0,200"><path> M代表起点，坐标为M后的两个数值，M(1,0)，L代表绘制直线从M(1,0)到L后的坐标所代表的点(20,40)，以此类推。

查看全部

1 采集收起来源：绘制曲线
2018-03-22
冬容

d3.select(selector) 选择符合条件的第一个元素 d3.selectAll（selector）选择符合条件的所有元素

查看全部

1 采集收起来源：select与selectAll区别
2017-12-27
辰墨

v4用新的曲线API来说明如何根据数据为line和area插值。line.interpolate和area.interpolate方法由line.curve和area.curve代替。 1, curveCatmullRom 2, curveCatmullRomClosed 3, curveCatmullRomOpen this._d3.line().curve(this._d3.curveCatmullRom.alpha(.5));

查看全部

1 采集收起来源：坐标系绘制
2017-12-26
_莫忘初衷_

// JavaScript Document var width= 500, height = 250, margin = { left:50, top:30, right:20, bottom:20,} g_width = width - margin.left-margin.right, g_height = height - margin.top - margin.bottom; //SVG var svg=d3.select("#container") .append("svg") //width,height .attr("width",width) //attribute .连接每个元素 .attr("height",height) var g = d3.select("svg") .append("g") .attr("transform","translate("+ margin.left+","+margin.top+")") var data=[1,2,6,8,7,6] var scale_x = d3.scale.linear() .domain([0,data.length-1])//输入的范围 .range([0,g_width])//输出的范围 var scale_y = d3.scale.linear() .domain([0,d3.max(data)]) .range([0,g_height]) var line_generator=d3.svg.line() .x(function(d,i){return scale_x(i);})//0,1,2,3, .y(function(d){return scale_y(d);})//1,3,5 .interpolate("cardinal")//折线变曲线 d3.select("g") .append("path") .attr("d",line_generator(data))//d="M1,0L20,40L40,60L100,100L0,200",d-path data

查看全部

1 采集收起来源：绘制曲线
2018-03-22
Godtrue

点——线——面——体——时空，凡事皆无中生有，由小及大，知识的积累更是如此！加油吧！

查看全部

1 采集收起来源：面积图表
2015-01-20
yi_灬花开若相依_0

var width=500; var height=300; var g_margin={top:30,right:100,bottom:80,left:100}; var g_width=width-g_margin.right-g_margin.left; var g_height=height-g_margin.top-g_margin.bottom; var data=[100,50,30,10,50,60,70,50,90,100]; var svg=d3.select('#container').append('svg').attr({width:width,height:height});; var g=d3.select('svg').append('g').attr('transform','translate('+g_margin.left+','+g_margin.top+')'); var scale_x=d3.scale.linear().domain([0,data.length-1]).range([0,g_width]); var scale_y=d3.scale.linear().domain([0,d3.max(data)]).range([g_height,0]); var line_generator=d3.svg.line().x(function(d,i){return scale_x(i);}).y(function(d){return scale_y(d);}) .interpolate('cardinal'); var path=d3.select('g').append('path').attr('d',line_generator(data)); var x_axis=d3.svg.axis().scale(scale_x); var y_axis=d3.svg.axis().scale(scale_y).orient('left'); g.append('g').call(x_axis).attr('transform','translate('+0+','+g_height+')'); g.append('g').call(y_axis)

查看全部

1 采集收起来源：坐标系绘制
2016-08-31
刀魂在线

在网页上制作图表，更直观，可以更快的获取信息。D3 为数据可视化而生代码是由JAVASCRIPT而写。开源。创造的热情。

查看全部

1 采集收起来源：课程简介
2014-12-30
IceCry

var data = [1,4,7,2,9,6,5,16], bar_height = 50, bar_padding = 10, svg_height = (bar_height+bar_padding)*data.length, svg_width = 500; var scale = d3.scale.linear() .domain([0,d3.max(data)]) .range([0,svg_width]); var svg = d3.select('#container') .append('svg') .attr('width',svg_width) .attr('height',svg_height) var bar = svg.selectAll('g') .data(data) .enter() .append('g') .attr('transform',function(d,i){return 'translate(0,'+i*(bar_height+bar_padding)+')';}) bar.append('rect') .attr({ "width": function(d) { return scale(d); }, "height": bar_height }) .style('fill','blue'); bar.append('text') .text(function(d){return d;}) .attr({ 'x':function(d){return scale(d);}, 'y':bar_height/2, 'text-anchor':'end' })

查看全部

1 采集收起来源：水平柱状图表
2018-03-22
sasa123 07:05

d3笔记

查看全部

0 采集收起来源：饼状图（上）
2016-04-26
SladeChung

线型图表： 1.select 2.append 3.attr 4.g(group) 5.transform

查看全部

0 采集收起来源：画布制作
2015-03-18
SladeChung

D3的魅力： 1.开源的精神，乐于分享的社区； 2.开发者、设计师、艺术家； 3.创作的热情；

查看全部

0 采集收起来源：课程简介
2014-12-14
永恒星 03:45

sssss

查看全部

0 采集收起来源：画布制作
2016-04-04