最后y轴标签被截断

Question

为什么我的最后y轴标签被切断？

http://jsfiddle.net/frhack/xjdfzbr9/

var fixData = function(d) { 
   d.date=parseDate(d.date);
   d.rate = +d.rate;
}

var getYearFrom = function(data) {
  return d3.min(data, function(d) { return d.date.getFullYear(); })
}

var IT = d3.locale ({
  "decimal": ",",
  "thousands": ".",
  "grouping": [3],
  "currency": ["", "€"],
  "dateTime": "%a %b %e %X %Y",
  "date": "%m/%d/%Y",
  "time": "%H:%M:%S",
  "periods": ["AM", "PM"],
  "days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  "shortDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  "months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  "shortMonths": ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"]
});


//function range (start, end) { return [...Array(1+end-start).keys()].map(v => start+v) }
    var currencyFormat = IT.numberFormat("$,.2f");
    var decimalFormat = d3.format("0.2f");

var format = d3.time.format("%Y-%m-%d");
var formatYM = d3.time.format("%Y-%m-%d");
  var height = 200;
    var width = 800;
    var margin = {top: 50, right:20, bottom: 40, left: 40};
  var parseDate = d3.time.format("%Y-%m-%d").parse;



  var dt = [
  {date:"1999-01-11",rate:2 },
  {date:"1999-02-21",rate:2 },
  {date:"1999-03-22",rate:3 },
  {date:"1999-04-12",rate:4 },
  {date:"1999-05-01",rate:5 },
 {date:"1999-06-11",rate:6 },
  {date:"1999-07-13",rate:7 },
  {date:"1999-08-14",rate:8 },
  {date:"1999-09-01",rate:9 },
  {date:"1999-10-03",rate:10 },
  {date:"1999-11-30",rate:11 },

  {date:"1999-12-31",rate:12 },
  {date:"2000-01-01",rate:2 },
  {date:"2000-02-23",rate:3 },
  {date:"2000-03-22",rate:4 },
  {date:"2000-04-11",rate:5 },
  {date:"2000-05-11",rate:6 },
  {date:"2000-06-01",rate:7 },
  {date:"2000-07-11",rate:8 },
  {date:"2000-08-22",rate:7 },
  {date:"2000-09-21",rate:6 },
  {date:"2000-10-12",rate:5 },
  {date:"2000-11-11",rate:4 },
  {date:"2000-12-31",rate:3 },
  {date:"2001-01-01",rate:8 },
  ];


dt.forEach(fixData);
var yearFrom = getYearFrom(dt);
var yearTo = 1+yearFrom;

//dt = dt.filter(d=>d.date.getYear()<=2000 && d.date.getYear()>=1999)
dt = dt.filter(function(d){ return d.date.getFullYear()<=yearTo && d.date.getFullYear()>=yearFrom});


var dateStart = parseDate(yearFrom + "-01-01");
  var numMonths = 25;
var dates = d3.range(0,numMonths).map(function(i){
    var d = new Date(dateStart.getTime());
    d.setMonth( dateStart.getMonth()+i )
    return d;
    });
 var tickValues = dates.filter(function(d,i){return i%2==0;});
 var dateEnd = parseDate(yearTo + "-12-31");



    // formatters for axis and labels

    var svg = d3.select("body")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
        .attr("class", "y axis");

    svg.append("g")
        .attr("class", "x axis");

    //var xScale = d3.scale.ordinal()
    //  .rangeRoundBands([margin.left, width], .1);




  var xScale = d3.time.scale()
    .domain([dateStart,dateEnd])
    .range ([margin.left, width]);

  var xrScale = d3.time.scale()
    .domain([dateStart,dateEnd])
    .range ([0, width-margin.left]);




    var yScale = d3.scale.linear()
        .range([height, 0])
    ;

    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
     .outerTickSize(0)
    .tickFormat(IT.timeFormat("%b-%Y"));




    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
    //.nice()
   //.tickSize(0).outerTickSize(10)
    //.ticks(10)
    .tickFormat(currencyFormat);

//d3.axis.outerTickSize(0);

  dtcb(dt);

    function dtcb(data) {
        //data = dt;
        // extract the x labels for the axis and scale domain
        var xLabels = data.map(function (d) { return d['date']; })
    //var yearFrom = getYearFrom(data);

        //xScale.domain(xLabels);
        yScale.domain([0, Math.round(d3.max(data, function(d) { return parseFloat(d['rate']); }))]);
    yScale.range([height , 0]);


        var line = d3.svg.line()
      //.interpolate("basis") 
            .x(function(d) { return xScale(d['date']); })
            .y(function(d) { return yScale(d['rate']); });


        svg.append("path")
            .datum(data)
            .attr("class","line")
            .attr("d", line);

        svg.select(".x.axis")
            .attr("transform", "translate(0," + (0+height) + ")")
            .call(xAxis.tickValues(
      //[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
          tickValues
          //xLabels.filter(function(d, i) { 
                  //if (i % 2 == 0)
                    //return d;
                //}
        ))
            .selectAll("text")
            .style("text-anchor","end")
            .attr("transform", function(d) {
                return "rotate(-45)";
            });

        svg.select(".y.axis")
            .attr("transform", "translate(" + (margin.left) + ",0)")
            .call(yAxis);



    }

Answer 1

我更新your fiddle。你失踪了追加g元素到您的SVG，然后转化，通过保证金。这是使得内部图表显示具有正确的顶部和左侧边缘。如果没有g您要变换的SVG本身，而不是SVG内容。

var svg = d3.select("body")
    .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 + ")");