D3我想要的網格線溢出將被隱藏

Question

我有以下D3的圖表，但網格線走出圖表 https://jsfiddle.net/ou28se1z/1/

//Define the X axis 
//Define the Y axis 
var yAxis = d3.svg.axis() 
     .scale(yScale) 
     .innerTickSize(-w) 
     .outerTickSize(0) 
     .orient("left") 
     .ticks(5); 
var xAxis = d3.svg.axis() 
      .scale(xScale) 
      .orient("bottom") 
      .innerTickSize(-h) 
      .outerTickSize(0) 
      .ticks(10); 

我認爲它涉及到innerTickSize財產

Answer 1

是的，這是與innerTickSize屬性有關。爲了實現在圖表中網格線的innerTickSize應該是：

var xAxis = d3.svg.axis() 
    .scale(xScale) 
    .orient("bottom") 
     .innerTickSize(-(h-padding*2)) 
     // within the chart height range not svg container height range 
    .outerTickSize(0) 
    .ticks(10); 

//Define Y axis 
var yAxis = d3.svg.axis() 
    .scale(yScale) 
    .innerTickSize(-(w - padding*7)) // within the chart width range not svg container height range 
.outerTickSize(0) 
    .orient("left") 
    .ticks(5); 

因爲在比例設置：

var xScale = d3.time.scale() 
    .domain([new Date(xExtents[0]), d3.time.day.offset(new  Date(xExtents[xExtents.length - 1]), 1)]) 
    .range([padding, w - padding * 6]); 

var yScale = d3.scale.linear() 
    .domain([0, yExtents[1]]) 
    .range([h - padding, padding]); 

範圍爲Y軸是不完全SVG的高度，因此，你需要更新innerTickSize相應地。工作示例here