Question

在我的图表中，我正在尝试修复条形图后面的grid，但有些我怎么能解决这个问题。任何人帮助我？

window.onload = function(){
  
    var margin = { left:60, top:30, right:60, bottom:30 },
      width = 550 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom,
      totalWidth = width + margin.left + margin.right,
      totalHeight = height + margin.top + margin.bottom;


    var data = [

        {"year":2012, "amount" : 1000, "value": 0 },
        {"year":2013, "amount" : 2000, "value": 50 },
        {"year":2014, "amount" : 3000, "value": 1.5 },
        {"year":2015, "amount" : 4000, "value": 2 },
        {"year":2016, "amount" : 9000, "value": 2.5 }

    ];

  var y = d3.scale.linear().range([height, 0]).domain([0, d3.max(data, function(d) { return d.amount; })]);
  var y1 = d3.scale.linear().range([height, 0]).domain([0, d3.max(data, function(d) { return d.value; })]);
  var y2 = d3.scale.linear().range([height, 0]).domain([0, d3.max(data, function(d) { return d.amount; })]);

  var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
  x.domain(data.map(function(d) { return d.year; }));
  
  var xAxis = d3.svg.axis().scale(x).orient("bottom");
  var yAxis = d3.svg.axis().scale(y1).tickFormat(function(d){
    return '$'+ (+d) + 'B';
  }).orient("left");

  var y1Axis = d3.svg.axis().scale(y2).orient("right");
  
  var svg = d3.select('#container').append('svg').attr({width:totalWidth,height:totalHeight});
  var graphMargin = "translate(" + margin.left + ',' + margin.top + ')';
  
  var playBoard = svg.append('g').attr("transform", graphMargin);
  var gridBoard = svg.append('g').attr("transform", graphMargin);
  
  
   var xParHolder = playBoard.selectAll('g').data( data ).enter().append('g')
   .attr("class", "x axis")
   .attr('transform', function(d,i){
    return 'translate(' + (x(d.year)) + ',' + '0)';
  });
  
  xParHolder.append('rect').attr('class', 'rect')
  .attr("y", function(d) { return y(d.amount); })
      .attr("height", function(d) { return height - y(d.amount); })
      .attr("width", x.rangeBand());
  
  playBoard.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (height+1) + ")")
      .call(xAxis);
      
  playBoard.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  playBoard.append("g")
      .attr("transform", "translate(" + width +',' + 0 + ")")
      .attr("class", "y axis")
      .call(y1Axis);

      gridBoard.append("g").attr("class", "y axis").call(yAxis)
      .selectAll("g.tick").each(function(d,i){
        if(i>0){
            d3.select(this).select('line').attr('x2',width);
        }
    });


}

#container {
	border: 2px solid red;
	text-align: center;
	padding: 2em;
}

svg{
  border:1px solid gray;
}

.rect {
  fill: steelblue;
}

.title {
  fill: white;
  font: 10px sans-serif;
  text-anchor: middle;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis path,
  .axis line{
    fill: none;
    stroke: black;
  }

  .line{
    fill: none;
    stroke: blue;
    stroke-width: 2px;
  }

  .tick text{
    font-size: 12px;
  }

  .tick line{
    opacity: 0.2;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="container"></div>

Answer 1

在一个SVG中，稍后会提到的内容将在后面绘制，因此将会在顶部显示。

话虽如此，你需要做的就是改变这一点：

var playBoard = svg.append('g').attr("transform", graphMargin);//this will be under
var gridBoard = svg.append('g').attr("transform", graphMargin);//this will be on top

为此：

var gridBoard = svg.append('g').attr("transform", graphMargin);//now gridBoard is under...
var playBoard = svg.append('g').attr("transform", graphMargin);//...and playBoard is on top

这是你的小提琴：https://jsfiddle.net/kck052o1/

d3.js - 如何修复网格`z-index`问题？

1 个答案: