D3实现分片柱状图

1.简要

在集成项目上做开发是，用到第三方提供的组件，组件不能满足X轴自定义的需求，于是被委派研究一下D3，看看D3有没有什么解决方案。

纵观D3的template，发现官方提供的模板并不能满足需求，D3的基本组件做的不是很好，或者说我研究的不够透彻，毕竟现在很多情况下

我们都是拿来主义，一旦一个组件能被使用便管不了许多，又由于项目赶时间，所以也就半透半熟的拿过来改吧改吧，先看一看效果图，由于

整个集成项目的背景和框架，这种风格还比较适合整个界面的风格，先看一看效果图

2.实现方法

D3提供的很多数据格式大部分都是通过CSV文件读取的，而这个文件在我们项目开发的时候不可能去单独创建生成这个文件，我们一般使用的都是实时从后台获取的数据(从后台读取在写到csv文件，前端再去读取这个文件，纯属是脱掉裤子放屁，多此一举。尽管D3提供了直接读取csv文件的方法，但是操作性太差，倒不如我们自己可以提供一种自己根据stack柱状图的格式要求在定义自己的返回格式，这样对于前后台的数据处理就相对来说简单多了)。下面就跟来看一下这种封装格式：

var dataset = [
                { name: "Success" ,
                  numbers: [	{ name:"Guest", value: 200 },
                        { name:"BYOD", value: 251 },
                        { name:"Corporate", value: 211 },
                        { name:"Unknown", value: 151 }
                        ] },
                { name: "Failure" ,    
		numbers: [{ name:"Guest", value: 354 },
 { name:"BYOD", value: 61 }, { name:"Corporate", value: 123 }, { name:"Unknown", value: 105 }] } ];

有没有感觉这种json的格式要比官方提供的csv格式的要舒服的多

书归正传，开始D3的stack之旅。

2.1 引入js文件

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

这个文件可以用官网的，也可以下载之后引入到html页面中

2.2 定义div

<div id="authentication_id"></div>

2.3 定义dataset 

//
      var width  = 1000;	//SVG width
      var height = 700;	//SVG height

      var svg = d3.select("#"+id)			//select div id
          .append("svg")
          .attr("width", width)	//set <svg> width
          .attr("height", height);//set <svg>height

      //1. init dataset
      var dataset = [
          { name: "Success" ,
              sales: [	{ year:"Guest", profit: 150 },
                  { year:"BYOD", profit: 321 },
                  { year:"Corporate", profit: 54 },
                  { year:"Unknown", profit: 123 }
                  ] },
          { name: "Failure" ,
              sales: [	{ year:"Guest", profit: 432 },
                  { year:"BYOD", profit: 321 },
                  { year:"Corporate", profit: 54 },
                  { year:"Unknown", profit: 105 }] }
      ];


      //2. change the data format which stack support
      var stack = d3.layout.stack()
          .values(function(d){ return d.sales; })
          .x(function(d){ return d.year; })
          .y(function(d){ return d.profit; });

      var data = stack(dataset);



      //3. draw

      //the outside border
      var padding = { left:150, right:100, top:30, bottom:30 };

      //set X-axis scale
      var xRangeWidth = width - padding.left - padding.right;

      var xScale = d3.scale.ordinal()
          .domain(data[0].sales.map(function(d){ return d.year; }))
          .rangeBands([0, xRangeWidth],0.3);

      //set y-axis scale

      //set Domain most value
      var maxProfit = d3.max(data[data.length-1].sales, function(d){
          return d.y0 + d.y;
      });

      //set range most value
      var yRangeWidth = height - padding.top - padding.bottom;

      var yScale = d3.scale.linear()
          .domain([0, maxProfit])		//Domain
          .range([0, yRangeWidth]);	//range


      //set color scale
      var color = d3.scale.category10();

      //add group element
      var groups = svg.selectAll("g")
          .data(data)
          .enter()
          .append("g")
          .style("fill",function(d,i){ return color(i); });

      //add rectangle
      var rects = groups.selectAll("rect")
          .data(function(d){ return d.sales; })
          .enter()
          .append("rect")
          .attr("x",function(d){ return xScale(d.year); })
          .attr("y",function(d){ return yRangeWidth - yScale( d.y0 + d.y ); })
          .attr("width",function(d){ return xScale.rangeBand(); })
          .attr("height",function(d){ return yScale(d.y); })
          .attr("transform","translate(" + padding.left + "," + padding.top + ")");

      //add axis
      var xAxis = d3.svg.axis()
          .scale(xScale)
          .orient("bottom");

      yScale.range([yRangeWidth, 0]);

      var yAxis = d3.svg.axis()
          .scale(yScale)
          .orient("left");

      svg.append("g")
          .attr("class","axis")
          .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) +  ")")
          .call(xAxis);

      svg.append("g")
          .attr("class","axis")
          .attr("transform","translate(" + padding.left + "," + (height - padding.bottom - yRangeWidth) +  ")")
          .call(yAxis);

      //add group tabs
      var labHeight = 50;
      var labRadius = 10;

      var labelCircle = groups.append("circle")
          .attr("cx",function(d){ return width - padding.right*0.98; })
          .attr("cy",function(d,i){ return padding.top * 2 + labHeight * i; })
          .attr("r",labRadius);

      var labelText = groups.append("text")
          .attr("x",function(d){ return width - padding.right*0.8; })
          .attr("y",function(d,i){ return padding.top * 2 + labHeight * i; })
          .attr("dy",labRadius/2)
          .text(function(d){ return d.name; });

这样就可以实现我们要的效果