Les axes X et Y sont coupés du bord dans d3js

Question

J'ai des données fictives dans le tableau de données et je veux en faire un nuage de points. Le rang est tracé sur l'axe des ordonnées et admit_probability sur l'axe des x. Je suis capable de localiser tous les 5 points que j'ai mais les axes sont incomplets des bords. Le script que j'ai est illustré ci-dessous:

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

Ce que je reçois de cela comme le montre le lien scatter plot. Les axes se coupent de la fin. Veuillez aider quelqu'un. Je ne suis pas capable de comprendre le problème.

Answer 1

Vous pouvez .nice() sur les domaines de votre échelle qui tente de générer plus agréables degrés sur votre domaine, en arrondissant/bas de la valeurs min/max pour arrondir les nombres, par exemple

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