频道栏目
首页 > 程序开发 > 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技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站

无需申请自动送