D3 - ティック値がドメインと範囲で均等に配置されない

Question

ティック値をY軸に均等に配置するにはどうすればよいですか？あなたが見ることができるように、グラフ上のすべてが

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

---

  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() 
      .range([0, width]); 

      var y = d3.scaleLinear() 
      .domain([0,4]) 
      .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); 

      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("text-anchor", "middle") 
      .style("font-size", graph.font) 
      .style("font-weight", "500") 
      .style("font-family", 
       "'Roboto Mono',RobotoDraft,Helvetica,Arial,sans-serif") 
      .text(graphTitle); 

Answer 1

正しくありません。あなたの軸は何も問題はありません。あなたはデータを使用してドメインを設定します。

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

これは、最大目盛りは、（400）あなたのデータの最大値であり、分目盛りがあなたのデータ（33）の最小値であることを意味します。

あなたには、いくつかのパディングをしたい場合は、次のようにドメインを設定します。someValueは、例えば1.05と0.95のようなものであるパディング

y.domain([d3.max(scope.curveData.meta, function(d) 
    { return d.glucoseLevel; 
})*someValue], 
[d3.min(scope.curveData.meta, function(d) 
    { return d.glucoseLevel; 
})*someValue]); 

。

今すぐあなたの質問に来る：

目盛りの値が均等に配置されていません。 Y軸にティック値を均等に配置するにはどうすればよいですか？

そして、問題はここにある：

var yAxis = d3.axisLeft(y).tickValues(glucoseLevelList); 

あなたはglucoseLevelListを使用してダニを設定しています。私はここに3つのデータポイントしかないと思う。ここの最初の解決方法はtickValuesを削除するだけですが、using d3.ticks()のようないくつかのオプションがあります。曲線の

は、ために最低限のドメインのが、このためにだけではなく、x軸の下に起こっていることが予想されます：

.curve(d3.curveCatmullRom.alpha(0.5));