Question

我是D3的新手，我正在制作散点图。这是代码：

var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]];
var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = +400 - margin.left - margin.right,
    height = +400 - margin.top - margin.bottom

var svg = d3.select("svg");
var xScale = d3.scaleLinear()
               .domain([0, d3.max(dataset, function(d) { return d[0]})])
               .range([20, 380]);
var yScale = d3.scaleLinear()
               .domain([0, d3.max(dataset, function(d) { return d[1]})])
               .range([380, 20]);
svg.selectAll("circle") 
   .data(dataset)  
   .enter().append("circle")
   .attr("cx", function(d) {return xScale(d[0]); })  
   .attr("cy", function(d) {return yScale(d[1]); }) 
   .attr("r", 5);

var yAxis = d3.axisLeft()
              .scale(yScale)
              .ticks(10);
svg.append("g")
   .attr("class","axis")
   .attr("transform", "translate(" + margin.left + " ,0)")
   .call(yAxis);

我得到了：

因此，y轴上的数字被阻止，因为没有足够的左边距空间。我知道我可以改变字体大小，但有没有其他方法可以解决这个问题？我试图改变左边距值，但它只是变得一团糟。提前谢谢！

Answer 1

现在，您的范围是硬编码的：

var xScale = d3.scaleLinear()
    .range([20, 380]);

var yScale = d3.scaleLinear()
    .range([380, 20]);

因此，您对margin对象所做的任何更改都不会影响点。

解决方案：使用margin对象设置范围：

var xScale = d3.scaleLinear()
    .range([margin.left, width - margin.right]);

var yScale = d3.scaleLinear()
    .range([height - margin.bottom, margin.top]);

这样，图表会动态适应您在边距上所做的任何更改。这是一个演示，其中包含margin.left: 50：

var dataset = [
    [5, 20],
    [480, 90],
    [250, 50],
    [100, 33],
    [330, 95],
    [410, 12],
    [475, 44],
    [25, 67],
    [85, 21],
    [220, 88]
];
var margin = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 50
    },
    width = 400,
    height = 400;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var xScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d) {
        return d[0]
    })])
    .range([margin.left, width - margin.right]);
var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d) {
        return d[1]
    })])
    .range([height - margin.bottom, margin.top]);
svg.selectAll("circle")
    .data(dataset)
    .enter().append("circle")
    .attr("cx", function(d) {
        return xScale(d[0]);
    })
    .attr("cy", function(d) {
        return yScale(d[1]);
    })
    .attr("r", 5);

var yAxis = d3.axisLeft()
    .scale(yScale)
    .ticks(10);
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + margin.left + " ,0)")
    .call(yAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>

D3散点图y轴数显示不完整

1 个答案: