d3jsの端からX軸とY軸が切り取られています

Question

データ配列にダミーデータがあり、そこから散布図を作成したいと思います。ランクはy軸にプロットされ、admit_probabilityはx軸にプロットされます。私が持っているすべての5点を見つけることができますが、軸はエッジから不完全です。私が持っている スクリプトを以下に示します。

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に示すようになります。軸は端から切れています。親切に助けてください。私はこの問題を理解することができません。

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を試すことができます