D3.js每隔2个条形图绘制一条垂直线，并在条形图的顶部绘制x轴标签

Question

我想在每2条柱线之后以及条形图顶部的标签上创建一条垂直线。

$(document).ready(function(){
   var dataArray = [
	  			{
	  				"xData" : 2016,
	  				"yData" : 38
	  			},
	  			{
	  				"xData" : 2017,
	  				"yData" : 27
	  			},
	  			{
	  				"xData" : 2016,
	  				"yData" : 50
	  			},
	  			{
	  				"xData" : 2017,
	  				"yData" : 27
	  			}  ];
drawBarchart("graph",dataArray,"count",700,400);
}
);


function drawBarchart(containerId, dataArray, yAxisText, chartAreaWidth,
		chartAreaHeight) {

	
	var margin = {
		top : 20,
		right : 20,
		bottom : 30,
		left : 40
	}, width = chartAreaWidth - margin.left - margin.right, height = chartAreaHeight
			- margin.top - margin.bottom;

	var formatPercent = d3.format(".0%");

	var y = d3.scale.linear().range([ height, 0 ]);

	//var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(formatPercent);
	var yAxis = d3.svg.axis().scale(y).orient("left");
	
	var svg = d3.select("#" + containerId).append("svg").attr("width",
			width + margin.left + margin.right).attr("height",
			height + margin.top + margin.bottom).append("g").attr("transform",
			"translate(" + margin.left + "," + margin.top + ")");

	/* d3.tsv("data.tsv", type, function(error, data) { */
	y.domain([ 0, d3.max(dataArray, function(d) {
		return d.yData;
	}) ]);

	svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr(
			"transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style(
			"text-anchor", "end").text(yAxisText);

	svg.selectAll(".bar").data(dataArray).enter().append("rect")
			.attr("class", "bar").attr("x", function(d, i) {
				return i * width/dataArray.length;
			}).attr("width", (width/dataArray.length)-20).attr("y", function(d) {
				return y(d.yData);
			}).attr("height", function(d) {
				return height - y(d.yData);
			});
    
    svg.selectAll("text.x").data(dataArray).enter()
        .append("text").attr("class", "x")
        .attr("x", function(d, i) {
			return (i * width/dataArray.length) + ((width/dataArray.length)-20)/2;
	    })
        .attr("y", height + 20)
        .attr("text-anchor", "middle")
        .text(function(d) { return d.xData; });

	/* }); */

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

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="graph">
    
</div>

Code also available in jsfiddle。

Answer 1

您可以尝试使用此javascript代码代替您的javascript代码吗。

  //Width and height
  var w = 500;
  var h = 100;
  var barPadding = 1;

  var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25];
  i=0;
 //Create SVG element
  var svg = d3.select("#graph")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

  //Add bars to the generated svg element
  svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d, i) {
   return i * (w / dataset.length);
  })
 .attr("y", function(d) {
   return h - (d * 4);
  })

  //setting dynamic width for each bar with bar padding acting as the space between bars
 .attr("width", w / dataset.length - barPadding)

 //multiplying data value with 4 to increase the height of the bars 
 .attr("height", function(d) {
  return d * 4;
 })

   //apply dynamic colors
   .attr("fill", function(d) {
    return "rgb(5, 2, " + (d * 10) + ")";
   });

   //set the label
   svg.selectAll("text")
  .data(dataset)
  .enter()
  .append("text")
  .text(function(d) {
   return d;
  })
  .attr("text-anchor", "middle")
  .attr("x", function(d, i) {
   return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
  })
 .attr("y", function(d) {
  if((i%2)==0){
  i++;
  return h-(h-10);
 }else{
   i++;
  return '';
 }
 })
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "black");