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> 

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");