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

yAxis的范围并不完全是svg的高度，因此您需要相应地更新innerTickSize。工作示例here

d3我想隐藏网格线溢出

1 个答案: