-
- isu_腾飞 2020-08-01
// svg
const SVG_WIDTH = 500
const SVG_HEIGHT = 250
const SVG_MARGIN = { left: 50, top: 30, right: 20, bottom: 20 }
const G_WIDTH = SVG_WIDTH - SVG_MARGIN.left - SVG_MARGIN.right
const G_HEIGHT = SVG_HEIGHT - SVG_MARGIN.top - SVG_MARGIN.bottom
// d3.select('#container').append('svg:svg')
const svg = d3
.select('#container')
.append('svg')
//width height
.attr('width', SVG_WIDTH) // attribute
.attr('height', SVG_HEIGHT)
const g = d3
.select('svg')
.append('g')
.attr('transform', `translate(${SVG_MARGIN.left}, ${SVG_MARGIN.top})`)
const data = [1, 3, 5, 7, 8, 4, 3, 7]
const scaleX = d3
.scaleLinear()
.domain([0, data.length]) // 输入的范围
.range([0, G_WIDTH]) // 输出的范围
const scaleY = d3
.scaleLinear()
.domain([0, d3.max(data)]) // 输入的范围
.range([G_HEIGHT, 0]) // 输出的范围
// const lineGenerartor = d3.svg
const lineGenerartor = d3
.line()
// .x((d, i) => i) // 0,1,2,3,4
.x((d, i) => scaleX(i)) // 0,1,2,3,4
.y((d) => scaleY(d)) // 1, 3, 5, 7, 8, 4, 3, 7
// .interpolate('cardinal') // 线的拟合方式
.curve(d3.curveCatmullRom.alpha(0.5)) // 线的拟合方式
g.append('path').attr('d', lineGenerartor(data)) //d=M1,0L20,$0L40,50L!00,200L0,200 d : is a short for path data
const xAxis = d3.axisBottom(scaleX)
const yAxis = d3.axisLeft(scaleY)
g.append('g').call(xAxis).attr('transform', `translate(0, ${G_HEIGHT})`)
g.append('g').call(yAxis)
- 0赞 · 0采集
-
- isu_腾飞 2020-08-01
// svg
const SVG_WIDTH = 500
const SVG_HEIGHT = 250
const SVG_MARGIN = { left: 50, top: 30, right: 20, bottom: 20 }
const G_WIDTH = SVG_WIDTH - SVG_MARGIN.left - SVG_MARGIN.right
const G_HEIGHT = SVG_HEIGHT - SVG_MARGIN.top - SVG_MARGIN.bottom
// d3.select('#container').append('svg:svg')
const svg = d3
.select('#container')
.append('svg')
//width height
.attr('width', SVG_WIDTH) // attribute
.attr('height', SVG_HEIGHT)
const g = d3
.select('svg')
.append('g')
.attr('transform', `translate(${SVG_MARGIN.left}, ${SVG_MARGIN.top})`)
const data = [1, 3, 5, 7, 8, 4, 3, 7]
const scaleX = d3
.scaleLinear()
.domain([0, data.length]) // 输入的范围
.range([0, G_WIDTH]) // 输出的范围
const scaleY = d3
.scaleLinear()
.domain([0, d3.max(data)]) // 输入的范围
.range([G_HEIGHT, 0]) // 输出的范围
// const lineGenerartor = d3.svg
const lineGenerartor = d3
.line()
// .x((d, i) => i) // 0,1,2,3,4
.x((d, i) => scaleX(i)) // 0,1,2,3,4
.y((d) => scaleY(d)) // 1, 3, 5, 7, 8, 4, 3, 7
// .interpolate('cardinal') // 线的拟合方式
.curve(d3.curveCatmullRom.alpha(0.5)) // 线的拟合方式
g.append('path').attr('d', lineGenerartor(data)) //d=M1,0L20,$0L40,50L!00,200L0,200 d : is a short for path data
const xAxis = d3.axisBottom(scaleX)
const yAxis = d3.axisLeft(scaleY)
g.append('g').call(xAxis).attr('transform', `translate(0, ${G_HEIGHT})`)
g.append('g').call(yAxis)
- 0赞 · 0采集
-
- 慕工程8088932 2019-12-27
- 简单可视化
-
截图0赞 · 0采集
-
- 保卫家乡 2019-08-01
- enter
-
截图0赞 · 0采集
-
- 柯柯基66 2019-05-18
https://blog.csdn.net/ysj1218/article/details/80523474,链式调用有点类似于jQuery
- 0赞 · 0采集
-
- 慕盖茨9606327 2018-11-15
查看浏览器的支持列表
支持svg的浏览器，对d3的支持还是比较好的
-
截图0赞 · 0采集
-
- 慕盖茨9606327 2018-11-15
d3代码在github上
-
截图0赞 · 0采集
-
- 慕盖茨9606327 2018-11-15
select&selectAll 选择html上的dom元素
append 添加我们想要的一些元素
读取和使用数据 使用一些函数来读取和使用数据，也可以使用dsv、csv一些数据格式
-
截图0赞 · 0采集
-
- 慕盖茨9606327 2018-11-15
可以做什么-
截图0赞 · 0采集
-
- LaplaceDemon 2018-10-07
- g元素 相当于html中的div，可以理解为group
-
截图0赞 · 0采集
-
- 冬容 2017-12-27
- d3.select(selector) 选择符合条件的第一个元素 d3.selectAll（selector）选择符合条件的所有元素
- 1赞 · 0采集
-
- 辰墨 2017-12-26
- 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赞 · 0采集
-
- 慕勒6343746 2017-12-19
- V4 nterpolate("cardinal") -> curve(d3.curveCardinal); d3.svg.line() -> d3.line() d3.scale.linear() -> d3.scaleLinear()
- 2赞 · 0采集
-
- 刻命 2017-09-18
- bost.ocks.org/mike/circles/
-
截图0赞 · 0采集
-
- simonc 2017-07-10
- //svg var svg = d3.select("#container") .append("svg") .attr("width",500) .attr("height",250) d3.select("svg") .append("g") .attr("transform","translate(50,30)")
- 0赞 · 0采集
-
- zoyafan 2017-05-25
- http://caniuse.com/#search=svg
- 0赞 · 0采集
-
- 慕粉113838380 2017-03-27
- 为什么我起了服务还是报那个错，直接用127.0.0.1:8888/data.csv可以获取到
- 0赞 · 0采集
-
- 雨谷 2017-03-09
- //竖直柱状图标（另一种方式） var data = [1,4,7,2,9,6,5,16], bar_height = 50, bar_padding = 10, svg_height = 500, svg_width = (bar_height+bar_padding)*data.length; var scale = d3.scale.linear() .domain([0,d3.max(data)]) .range([0,svg_height]); var svg = d3.select('#container') .append('svg') .attr('width',svg_width) .attr('height',svg_height) //enter undate exit var bar = svg.selectAll('g') .data(data) .enter() .append('g') .attr('transform',function(d,i){return 'translate('+i*(bar_height+bar_padding)+','+(svg_height-scale(d))+')';}) bar.append('rect') .attr({ "width": bar_height, "height": function(d){return scale(d)} }) .style('fill','steelblue'); //形成了一个新的坐标系 bar.append('text') .text(function(d){return d;}) .attr({ 'x':bar_height/2, 'y':0, "dy":15, 'text-anchor':'end' })
- 0赞 · 0采集
-
- 鱼左三水 2016-12-11
- ordinal
-
截图0赞 · 0采集
-
- 鱼左三水 2016-12-11
- ordinal
- 0赞 · 0采集
-
- 尚尚_0002 2016-12-05
- 视频源码下载：http://download.csdn.net/detail/u010534192/9701849
- 0赞 · 0采集
-
- 尚尚_0002 2016-12-05
- 视频源码下载：http://download.csdn.net/detail/u010534192/9701849
- 0赞 · 0采集
-
- 尚尚_0002 2016-12-05
- 视频源码下载：http://download.csdn.net/detail/u010534192/9701849
- 0赞 · 0采集
-
- 尚尚_0002 2016-12-05
- 视频源码下载：http://download.csdn.net/detail/u010534192/9701849
- 0赞 · 0采集
-
- 尚尚_0002 2016-12-05
- 视频源码下载：http://download.csdn.net/detail/u010534192/9701849
- 0赞 · 1采集
-
- 尚尚_0002 2016-12-05
- 视频源码下载：http://download.csdn.net/detail/u010534192/9701849
- 0赞 · 1采集
-
- 尚尚_0002 2016-12-05
- 视频源码下载：http://download.csdn.net/detail/u010534192/9701849
- 0赞 · 0采集
-
- 微笑的芒果 2016-11-28
- 线型图表相关知识点
-
截图0赞 · 0采集
-
- 微笑的芒果 2016-11-28
- 线型图表的 DOM结构
-
截图0赞 · 0采集
-
- 微笑的芒果 2016-11-28
- D3 支持的浏览器
-
截图0赞 · 0采集
