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)。

如果您想要一些填充，请像这样设置域：

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

someValue 是填充，例如 1.05 和 0.95。

现在你的问题来了：

刻度值的间距不均匀。如何在 Y 轴上均匀分布刻度值？

问题就在这里：

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

您正在使用glucoseLevelList 设置刻度。我敢打赌，这里只有三个数据点。这里的第一个解决方案是删除tickValues，但您还有其他几个选项，例如using d3.ticks()。

对于曲线，预计它会低于 x 轴，不仅因为最小域，还因为：

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