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

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

使用D3制作图表

最热最新

小云7107 03:05

没有过多考虑浏览器兼容性

查看全部

0 采集收起来源：课程简介
2016-11-24
_莫忘初衷_ 02:11

Y轴添加文本坐标

查看全部

0 采集收起来源：Y轴添加文本标签
2016-10-11
_莫忘初衷_

// 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
IdealTimes 04:02

绘制曲线

查看全部

0 采集收起来源：绘制曲线
2016-10-01
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
yi_灬花开若相依_0

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 采集收起来源：Y轴添加文本标签
2016-08-31
谱出逝水流年

添加字母刻度的坐标轴

查看全部

0 采集收起来源：添加字母刻度的坐标轴
2016-08-04
ten_hole 02:59

D3简介

查看全部

0 采集收起来源：课程简介
2016-07-26
sasa123 07:05

d3笔记

查看全部

0 采集收起来源：饼状图（上）
2016-04-26
永恒星 03:45

sssss

查看全部

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

ipad看不了

查看全部

0 采集收起来源：课程简介
2016-03-14
maomao2hao

js在html正文的最后引入

查看全部

0 采集收起来源：画布制作
2016-03-13
Rstudy 03:22

D3浏览器支持

查看全部

0 采集收起来源：课程简介
2016-02-01
Rstudy 02:52

D3制作图表

查看全部

0 采集收起来源：课程简介
2016-02-01
给我一支笔 03:34

查询网站对所有浏览器的兼容情况

查看全部

0 采集收起来源：课程简介
2015-12-11