D3学习笔记：垂直柱状图表 barchart-CSDN博客

代码地址

简单垂直柱状图标

图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>linechart</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div id="container"></div>
  <script src="https://d3js.org/d3.v4.js"></script>
  <script src="js/index.js"></script>
</body>
</html>

var data = [1,6,4,3,3,8,5,4,3,7],
bar_width = 50,
bar_padding = 10,
width = (bar_width + bar_padding)*data.length,
height = 600;


var scale = d3.scaleLinear()
.domain([0,d3.max(data)])
.range([height,0]);

var svg = d3.select("#container")
.append("svg").attr("width",width).attr("height",height)

var bar = svg.selectAll("g").data(data).enter().append("g").attr("transform",function(d,i){
  return "translate("+i*(bar_width+bar_padding)+",0)";
})

bar.append("rect").attr("y",function(d){return scale(d);})
.attr("width",bar_width)
.attr("height",function(d){return height - scale(d)})
.style("fill","steelblue")

bar.append("text").text(function(d){return d;}).attr("y",function(d){return scale(d+0.1);}).attr("x",bar_width/2)

我们根据实际开发，使用数据文件生成图表

d3.csv("../data.csv",type,function(data){
    console.log(data);



var bar_width = 50,
bar_padding = 10,
width = (bar_width + bar_padding)*data.length,
height = 600;


var scale = d3.scaleLinear()
.domain([0,d3.max(data,function(d){return d.population;})])
.range([height,0]);

var svg = d3.select("#container")
.append("svg").attr("width",width).attr("height",height)

var bar = svg.selectAll("g").data(data).enter().append("g").attr("transform",function(d,i){
  return "translate("+i*(bar_width+bar_padding)+",0)";
})

bar.append("rect")
.attr("y",function(d){return scale(d.population);})
.attr("width",bar_width)
.attr("height",function(d){return height - scale(d.population)})
.style("fill","steelblue")

bar.append("text")
.text(function(d){return d.year;})
.attr("y",function(d){return scale(d.population+0.1);})
.attr("x",bar_width/2)

})
function type(d){
    d.population = +d.population;
    return d;

}

图片描述

网格柱状图表

相关d3知识点

柱状图的绘制；
坐标轴的绘制；
D3的轴组件是为D3的quantitative, time 和 ordinal 标度所设计的

SVG-Axes（坐标轴）

d3.svg.axis()  //新建一个默认的坐标轴

axis(selection) //轴线适用于selection 或transition 选择器必须包含一个SVG或者g元素
例如：

 d3.select("body").append("svg").attr("class","axis").attr("width",1440).attr("heihgt",30).append("g").attr("transform","translate(0,30)").call(axis) 

axis.scale([scale])(量度)
//如果scale度量有指定，则设置相应量度并返回轴线。若没有指定， 则返回当前量度默认为线性量度。
axis.orient([orientation])（方向）
//若orientation方向有指定，则设置相应方向并返回。若没有指定，则返回默认方向“bottom”。支持的方向有：
"top" - 横坐标的刻度标注位于轴上方
"bottom" - 横坐标的刻度标注位于轴下方
"left" - 纵坐标的刻度标注位于轴左边
"right" - 纵坐标的刻度标注位于轴右边
如果指定的方向不是以上四个支持的参数之一，则会自动恢复默认值。改变方向只能改变刻度标注和轴路径相关标签的位置，并不能改变轴线本身的位置；而要针对当前区域去改变轴的位置，则可以通过指定相应的g元素的transform属性。

刻度的绘制；
网格线的绘制；
简单的事件；