Question

出于某种原因，我的图表正在进入我的填充，即使我已将填充结合到y值的线性比例中。这是我的代码：

$(document).ready(function(){

  //padding
  var padding = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20,
  };

  //graph dimensions
  var w = 1000
  var h = 500

  //append and assign variable reference to svg
  var svg = d3.select('section').append('svg').attr('id', 'graph').attr('width', w).attr('height', h);

  //get json data
  d3.json('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json', function(error, data){

    //error handling
    if (error){
      console.warn(error);
    }

    var dataset = data.data;

    //minimum and maximum date data points
    var minDate = new Date(dataset[0][0]);
    var maxDate = new Date(dataset[274][0]);

    //scale data to svg dimensions
    var xScale = d3.time.scale().domain([minDate, maxDate]).range([padding.left, w - padding.right]);
    var yScale = d3.scale.linear().domain([0, d3.max(dataset, function(d){return d[1];})]).range([h - padding.bottom, padding.top]);
    console.log(yScale(0));
    //make x and y axis
    var xAxis = d3.svg.axis().orient('bottom').scale(xScale);

    //generate graph
    svg.selectAll('rect')
      .data(dataset)
      .enter()
      .append('rect')
      .attr('x', function(d, i){
        return i * ((w - padding.left - padding.right) / dataset.length) + padding.left;
      })
      .attr('y', function(d){
        return yScale(d[1]);
      })
      .attr('width', (w - padding.left - padding.right) / dataset.length)
      .attr('height', function(d){return d[1]})
      .attr('fill', '#4682B4');

    //generate x and y axix
    svg.append('g')
      .attr('class', 'axis')
      .attr('transform', 'translate(0,' + (h - padding.bottom) + ')')
      .call(xAxis);
  });
});

以下是Codepen上的页面。

有谁知道为什么图形像这样切入x轴？如何修复它以使条形图从底部开始padding.bottom像素

Answer 1

我找到了答案，我将svg的height属性更改为：

.attr('height', function(d){return h - padding.bottom - yScale(d[1])});

并且有效

线性刻度不使用d3中指定的范围

1 个答案: