d3js에서 X 축과 Y 축이 잘리지 않습니다.

Question

데이터 배열에 더미 데이터가 있습니다. 거기에서 분산 형 그림을 만들고 싶습니다. 순위는 y 축에 표시되고 admit_probability는 x 축에 표시됩니다. 나는 가지고있는 모든 5 점을 찾을 수 있지만 축은 모서리에서 불완전합니다. 내가 가진 스크립트는 다음과 같습니다 : 내가이에서 무엇입니까하는 것은 같은 링크 scatter plot에 표시됩니다

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"); 

. 축이 끝에서 절단됩니다. 친절하게 누군가 도움이됩니다. 나는 그 문제를 이해할 수 없다.

Answer 1

당신은 예를

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]); 

를 들어, 숫자를 반올림/아래 최소/최대 값을 반올림하여 도메인에 더 좋은 확장을 생성하려고 저울의 도메인에 .nice()를 시도 할 수 있습니다