X轴和Y轴从d3js的边缘开始切割
问题描述:
我在数据数组中有一些虚拟数据,我想从中做出散点图。排名在y轴上绘制,在x轴上为admit_probability。我能够找到我拥有的所有5个点,但是从边缘开始的轴不完整。 脚本我有如下所示:X轴和Y轴从d3js的边缘开始切割
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var data = [{"admit_probability":54,"rank":20},
{"admit_probability":79,"rank":111},
{"admit_probability":70,"rank":68},
{"admit_probability":12,"rank":1},
{"admit_probability":197,"rank":87}];
var xscale = d3.scaleLinear()
.domain(d3.extent(data, function(d) { return +d.admit_probability; }))
.range([0, width]);
var yscale = d3.scaleLinear()
.domain(d3.extent(data, function(d) { return +d.rank; }))
.range([height, 0]);
var xAxis = d3.axisBottom().scale(xscale);
var yAxis = d3.axisLeft().scale(yscale);
var svg = d3.select("#content-box")
.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 + ")");
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.attr("cx", function(d) { return xscale(+d.admit_probability); })
.attr("cy", function(d) { return yscale(+d.rank); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text")
.attr("transform", "translate(" + (width/2) + " ," + (height + margin.bottom) + ")")
.style("text-anchor", "middle")
.text("Average Acceptance");
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// Add the text label for the Y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height/2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Rank");
什么我从这个越来越被链接scatter plot,如图所示。轴从最后被切断。请帮助。我无法理解这个问题。
答
您可以尝试在你的规模的域.nice(),它尝试生成您的域名漂亮程度,通过四舍五入向上/向下最小值/最大值四舍五入的数字,例如
var xscale = d3.scaleLinear()
.domain(d3.extent(data, function(d) { return +d.admit_probability; })).nice()
.range([0, width]);
var yscale = d3.scaleLinear()
.domain(d3.extent(data, function(d) { return +d.rank; })).nice()
.range([height, 0]);
+0
非常感谢。有效! – Yesha
我不明白'轴从末端切割'的含义。您是否指“平均接受度”字母的底部被切断?或者你只是想在轴的边缘有一个更大的间隙,以便数据点不在边缘? – Mark
如果你看看我已经添加的链接,对于最右边的点,在x轴上没有提到任何东西。目前只有一个小勾号,但没有任何价值。类似地,y-aixs上的最高点。 我觉得在轴上有更多的数字是不可见的。我说得对吗?我是新来的。 – Yesha