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的邊緣開始切割

回答

相關問題