如何在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);
答案 0 :(得分:2)
你的轴没有问题。您可以使用以下数据设置域:
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));