频道澳门葡京手机版网址
登录注册
澳门葡京手机版网址 > 澳门葡京手机版网址 > web前端 > HTML/CSS > 正文
使用D3.js绘制顺化曲线图、坐标轴
2018-11-09 10:43:19           
收藏   我要投稿
使用D3.js绘制顺化曲线图、坐标轴

index.html

index.js

// 定义svg的宽度和高度

var width = 500,

height = 250,

margin = {left:50,top:30,right:20,bottom:20},

// 图表的宽度=svg的宽度减去margin

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")

// 设置x,y轴偏移量

.attr("transform","translate(" +margin.left+","+ margin.top +")")

var data = [1,3,5,7,8,4,3,7]

// 设置缩放

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()

// d表示传进来的数据 i表示数据的下标

.x(function(d,i){return scale_x(i);}) // 0,1,2,3

.y(function(d){return scale_y(d);}) // 1,3,5

// 去除线的棱角 使其顺滑

.interpolate("cardinal")

g

.append("path")

// d 是 path data的缩写 将data数据传人

.attr("d",line_generator(data)) // d = "M1,0L20,40L40,50L100,100L0,200"

// 生成坐标轴

var x_axis = d3.svg.axis().scale(scale_x),

// y轴在左侧

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)")

.attr("text-anchor","end")

.attr("dy","1em")

style.css

#container {

background: #ddd;

width: 500px;

height: 250px;

}

path {

fill:none;

stroke: #4682B4;

stroke-width:2;

}

/* 设置坐标样式 */

.domain,tick line {

stroke:gray;

stroke: width;

}

点击复制链接 与好友分享!回澳门葡京手机版网址澳门葡京手机版网址
上一篇:javascript之瀑布流图片覆盖
下一篇:AngularJS监听ng-repeat渲染完成后事件
相关文章
图文推荐
点击排行

关于大家 | 联系大家 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 澳门葡京手机版网址_澳门新莆京娱乐_www.88807.com - 点此进入--致力于做实用的IT技术学习网站

XML 地图 | Sitemap 地图