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，如图所示。轴从最后被切断。请帮助。我无法理解这个问题。

来源

2017-10-14 Yesha

我不明白'轴从末端切割'的含义。您是否指“平均接受度”字母的底部被切断？或者你只是想在轴的边缘有一个更大的间隙，以便数据点不在边缘？ – Mark

如果你看看我已经添加的链接，对于最右边的点，在x轴上没有提到任何东西。目前只有一个小勾号，但没有任何价值。类似地，y-aixs上的最高点。我觉得在轴上有更多的数字是不可见的。我说得对吗？我是新来的。 – Yesha

您可以尝试在你的规模的域.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]);

来源

2017-10-15 20:43:19

非常感谢。有效！ – Yesha

X轴和Y轴从d3js的边缘开始切割

回答

相关问题