您的位置：首页 > 其它

使用D3制作统计图表、线性图表、水平柱状图表、饼图 -- （一）线性图表

2017-04-23 17:21 519 查看

index.html(图表页面)

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>D3</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="container"></div>

</body>

<script src="https://d3js.org/d3.v3.js"></script>

<script src="index.js"></script>

</html>

index.js(JS代码)

var data = [0,34.45,45.534,556,76,87,234,234]

generateLineChart(data,"#container",800,250,"时间(天)","销售总价(￥)","svg_price","g_price") //D3生成线性图表

/**

* @desc D3生成线性图表

*/

function generateLineChart(data,container,width,height,x_text,y_text,svg_class,g_class) {

// var width = 500 //contianer元素宽度

// var height = 250 //contianer元素高度

var margin = {left:50,top:30,right:20,bottom:20} //contianer元素边距

var g_width = width - margin.left - margin.right //svg元素高度

var g_height = height - margin.top - margin.bottom //svg元素宽度

//在id为contanier的容器里添加svg元素，并设置宽度和高度

var svg = d3.select(container)

.append("svg:svg")

.attr("class",svg_class)

.attr("width", width+50)

.attr("height", height)

//获得添加后的svg元素，设置边距

var g = d3.select("."+svg_class)

.append("g")

.attr("class", g_class)

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

//指定x,y缩放比例

var x_scale = d3.scale.linear()

.domain([0, data.length-1])

.range([0, g_width])

var y_scale = d3.scale.linear()

.domain([0, d3.max(data)])

.range([g_height, 0])

//d元素属性值x,y坐标

var line_generator = d3.svg.line()

.x(function(d,i){ return x_scale(i); })

.y(function(d){ return y_scale(d); })

// .interpolate("cardinal") //是否曲线

//给svg元素添加path并设置d属性

d3.select("."+g_class)

.append("path")

.attr("d", line_generator(data))

//添加横轴坐标轴

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

y_axis = d3.svg.axis().scale(y_scale).orient("left")

//添加x坐标轴并设置文字描述

g.append("g")

.call(x_axis)

.attr("transform", "translate(0,"+g_height+")")

.append("text")

.text(x_text)

.attr("transform", "translate("+g_width+",0)")

//添加y坐标轴并设置文字描述

g.append("g")

.call(y_axis)

.append("text")

.text(y_text)

.attr("transform", "translate(-15,-15)")

// .attr("transform", "rotate(-90)")

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

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

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： d3 统计图

相关文章推荐

新的分享

章节导航