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

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

使用D3制作图表

最热最新

Conan9912345

g.append('g').call(y_axis).append('text').text('Price($)').attr({ 'transform': 'rotate(-90)', 'text-anchor': 'end', 'dy': '1em' });

查看全部

0 采集收起来源：Y轴添加文本标签
2014-12-09
Conan9912345

var svg_width=500; var svg_height=300; var g_margin={top:50,right:100,bottom:50,left:100}; var g_width=svg_width-g_margin.right-g_margin.left; var g_height=svg_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: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 line_generator=d3.svg.line().x(function(d,i){returnscale_x(i);}).y(function(d){returnscale_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);

查看全部

0 采集收起来源：坐标系绘制
2014-12-08
Conan9912345

var svg_width = 500; var svg_height = 300; var g_margin = { top: 50, right: 100, bottom: 50, left: 100 }; var g_width = svg_width - g_margin.right - g_margin.left; var g_height = svg_height - g_margin.top - g_margin.bottom; var svg = d3.select("#container").append('svg').attr('width', svg_width).attr('height', svg_height); var g = d3.select('svg').append('g').attr('transform', 'translate(' + g_margin.left + ',' + g_margin.top + ')');

查看全部

0 采集收起来源：画布制作
2018-03-22
Conan9912345

1.select 2.selectAll 3.append 4.读取和使用数据

查看全部

0 采集收起来源：课程简介
2014-12-08
狐小鱼 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
慕移动5098135 00:02

看我名字加Q1019017657

查看全部

0 采集收起来源：课程简介
2014-11-27
灵魂火

关于图像的缩放的技巧，需要单独拿出来练练～

查看全部

0 采集收起来源：坐标系绘制
2014-11-26
Zalberth 00:51

定义了，还要选？

查看全部

0 采集收起来源：绘制曲线
2014-11-25
yunxiange 04:33

How D3 Selections Work? http://bost.ocks.org/mike/selection/

查看全部

0 采集收起来源：select与selectAll区别
2014-11-23
yunxiange 00:25

简单的曲线绘制，平滑函数 - interpolate('cardinal')

查看全部

0 采集收起来源：select与selectAll区别
2014-11-23
Frank_0003 00:16

哈哈哈

查看全部

0 采集收起来源：面积图表
2014-11-23
wamjvk 01:33

这是很有用的，目前这个用途很广。

查看全部

0 采集收起来源：课程简介
2014-11-19
itsyizu 06:31

data 数组看不懂啊

查看全部

0 采集收起来源：绘制曲线
2014-12-01
墨西哥鸡味卷 00:22

包含关系：如何创建画布。。

查看全部

0 采集收起来源：绘制曲线
2014-11-19
Ann_0014

学习学习

查看全部

0 采集收起来源：课程简介
2014-11-14