X 和 Y 轴在 d3js 中从边缘被切断

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

我从中得到的结果如 link scatter plot 所示。轴从末端被切断。请有人帮助。我无法理解这个问题。

Answer 1

您可以在您的秤的域上尝试 .nice()，它会尝试在您的域上生成更好的范围，方法是将 up/down 的 min/max 值四舍五入为数字，例如

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

X 和 Y 轴在 d3js 中从边缘被切断

X and Y axis are getting cut from edge in d3js

scaling

scatter-plot

d3.js