代码地址

简单垂直柱状图标

图片描述

    
        linechart

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 标度所设计的

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属性。