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

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

使用D3制作图表

最热最新

ming915

http://d3js.org/

查看全部

0 采集收起来源：画布制作
2015-01-02
ming915

下载地址：https://github.com/mbostock/d3

查看全部

0 采集收起来源：课程简介
2015-01-02
ming915 03:18

支持的平台

查看全部

0 采集收起来源：课程简介
2015-01-02
ming915 09:20

select 选择元素 append 添加元素 attr 元素属性

查看全部

0 采集收起来源：画布制作
2014-12-31
ming915 03:03

select append attr g

查看全部

0 采集收起来源：画布制作
2014-12-31
刀魂在线

select append attr tranform g(group)

查看全部

0 采集收起来源：画布制作
2014-12-30
刀魂在线

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

查看全部

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

var data = [1,4,7,2,9,6,5,16], bar_width = 50, bar_padding = 10, svg_width = (bar_width+bar_padding)*data.length, svg_height = 500; var scale = d3.scale.linear() .domain([0,d3.max(data)]) .range([svg_height,0]); 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('+i*(bar_width+bar_padding)+',0)';}) bar.append('rect') .attr({ 'y':function(d){return scale(d);}, "width": bar_width, "height": function(d){return svg_height-scale(d);} }) .style('fill','blue'); bar.append('text') .text(function(d){return d;}) .attr({ 'x':bar_width/2, 'y':function(d){return scale(d);}, 'dy':'15', 'text-anchor':'middle' })

查看全部

0 采集收起来源：竖直柱状图表
2018-03-22
IceCry

var data = [1,4,7,2,9,6,5,16], bar_width = 50, bar_padding = 10, svg_width = (bar_width+bar_padding)*data.length, svg_height = 500; var scale = d3.scale.linear() .domain([0,d3.max(data)]) .range([svg_height,0]); 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('+i*(bar_width+bar_padding)+',0)';}) bar.append('rect') .attr({ 'y':function(d){return scale(d);}, "width": bar_width, "height": function(d){return svg_height-scale(d);} }) .style('fill','blue'); bar.append('text') .text(function(d){return d;}) .attr({ 'x':bar_width/2, 'y':function(d){return scale(d);}, 'dy':'15', 'text-anchor':'middle' })

查看全部

0 采集收起来源：竖直柱状图表
2018-03-22
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
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
Conan9912345

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

查看全部

0 采集收起来源：竖直柱状图表
2018-03-22
Conan9912345

var data = [1,4,7,9,14,5,3,9,8,6]; var bar_height = 50; var bar_padding = 10; var svg_width = 500; var svg_height = ( bar_height + bar_padding ) * data.length; 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, "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 }); bar.append('text').text(function(d) { return d; }).attr({ "x": function(d) { return scale(d); }, "y": bar_height / 2, "text-anchor": "end" });

查看全部

0 采集收起来源：水平柱状图表
2018-03-22
Conan9912345

var svg = d3.select('#container').append('svg').attr({ width: svg_width, height: svg_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 area_generator = d3.svg.area().x(function(d, i) { return scale_x(i); }).y0(g_height).y1(function(d) { return scale_y(d); }).interpolate('cardinal'); var path = d3.select('g').append('path').attr('d', area_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).append('text').text('Price($)').attr({ 'transform': 'rotate(-90)', 'text-anchor': 'end', 'dy': '1em' });

查看全部

0 采集收起来源：面积图表
2014-12-09

首页上一页 5 6 7 8 9 下一页尾页

0/150

提交

取消

开始学习

课程须知: 有html，css和javascript基础的同学学习这门课程会比较容易一些。没有基础的同学，也可以通过课程里面的例子加深自己对相关知识的理解。

老师告诉你能学到什么？: 如何使用select和selectAll选择DOM元素、如何使用append添加DOM元素、如何使用line，area等方法生成图表曲线、如何使用数据文件让我们的图表可以随着数据变化而动态更新。

微信扫码，参与3人拼团

热搜

最近搜索清空

使用D3制作图表