D3ティック値と軸のパス線の間のグラフスペース

Question

200と12:00PMが一致する左下隅には、値が近づいて混雑しています。さらに、ドットは左上角の400を閉じます。

を.tick text {}で試しましたが、運がありません。 ティック値の間に軸のパス線を入れるにはどうすればよいですか？

---

.axis line { 
    opacity: .5; 
} 

.x.axis path { 
    opacity: 0; 
} 

.y.axis path { 
    opacity: 0; 
} 

.curve { 
    fill: none; 
    stroke: steelblue; 
    stroke-width: 1.5px; 
} 

.graph-sheet { 
    display: flex; 
    background-color: #fafafa; 
    border-radius: 2px; 
    align-items: center; 
    justify-content: center; 
} 


.large { 
    width: 700px; 
    height: 400px; 
} 

.med { 
    width: 600px; 
    height: 300px; 
} 

.small { 
    width: 400px; 
    height: 200px; 
} 

.graph-title { 
    font-weight: 500; 
    text-anchor: middle; 
    font-size: 20px; 
    font-family: 'Roboto Mono',RobotoDraft,Helvetica,Arial,sans-serif; 
} 

.tick text { 
    padding: 30px; 
    font-size: 12px; 
    fill: rgba(0,0,0,.54) !important; 
} 

---

  var graph = setGraphSize(attrs.graphSize); 

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

      var parseDate = d3.timeParse('%H:%M'); 

      // converts strings to date times 
      scope.curveData.meta.forEach(function(d) { 
      d.timeStamp = parseDate(d.timeStamp); 
      d.glucoseLevel = +d.glucoseLevel; 
      }); 

      var x = d3.scaleTime() 

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

      var timeStampList = scope.curveData.meta.map(function (d) { return d.timeStamp; }); 

      // creates X axis 
      var xAxis = d3.axisBottom(x) 
         .tickValues(timeStampList) 
         .tickFormat(d3.timeFormat("%I:%M %p")) 

      var glucoseLevelList = getTicks('glucoseLevel', scope.curveData); 
      var yAxis = d3.axisLeft(y).tickValues(glucoseLevelList).tickSizeInner(-width); 

      var curve = d3.line() 
      .x(function(d) { return x(d.timeStamp); }) 
      .y(function(d) { return y(d.glucoseLevel); }) 
      .curve(d3.curveCatmullRom.alpha(0.5)); 

      var divEl = element[0].querySelector('div'); 
      divEl.classList.add(attrs.graphSize); 

      var svg = d3.select(divEl).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 + ')'); 


      x.domain(d3.extent(scope.curveData.meta, function(d) { return d.timeStamp; })); 
      y.domain(d3.extent(scope.curveData.meta, function(d) { return d.glucoseLevel; })); 

      // Add the scatterplot 
      svg.selectAll("dot") 
      .data(scope.curveData.meta) 
      .enter().append("circle") 
      .attr("r", 3.5) 
      .attr("cx", function(d) { return x(d.timeStamp); }) 
      .attr("cy", function(d) { return y(d.glucoseLevel); }); 

      // Add the X Axis 
      svg.append('g') 
      .attr('class', 'x axis') 
      .attr('transform', 'translate(0,' + height + ')') 
      .call(xAxis); 

      // Add the Y Axis 
      svg.append('g') 
      .attr('class', 'y axis') 
      .call(yAxis) 

      // Add the value curve path. 
      svg.append('path') 
      .attr('class', 'curve') 
      .attr('d', curve(scope.curveData.meta)); 

      var graphTitle = graphTitleGenerator(scope.curveData); 
      svg.append("text") 
      .attr("x", (width/2)) 
      .attr("y", 0 - (margin.top/4)) 
      .attr('class', 'graph-title') 
      .text(graphTitle); 

Answer 1

これはD3 v4.x.ありますしたがって、y軸にを設定する必要があります。

var yAxis = d3.axisLeft(y) 
    .tickValues(glucoseLevelList) 
    .tickSizeInner(-width) 
    .tickPadding(30);