Осевые оси D3 в верхней части графика

Question

Следующий код отображает оси сверху графика, и я не могу найти, где добавить/вычесть пиксели, чтобы выровнять их.

Я провел выходные, пытаясь решить это, но я чувствую себя застрявшим. В отчаянии я попытался добавить и вычесть отступы в разных местах, добавить поля здесь и там, чтобы переместить вещи. Это похоже на график, и оси находятся в двух разных масштабах, но я не вижу, где я это делаю. Это ссылка на мой codepen: http://codepen.io/piacoding/pen/amzoog?editors=0010

спасибо,

var w = 780; 
    var h = 500; 
    var padding = 60; 

    var svg = d3.select("#graph") 
     .append("svg:svg") 
     .attr("width", w) 
     .attr("height", h) 
     .attr('class', 'gdp'); 

    // define the x scale (horizontal) 
    var mindate = new Date(1947, 0, 1), 
     maxdate = new Date(2015, 6, 1); 

    var xScale = d3.time.scale() 
     .domain([mindate, maxdate]) 
     .range([padding, w - padding]); 

    var maxnumber = d3.max(dataset, function(d) { 
     return d[1] 
    }); 

    var yScale = d3.scale.linear() 
     .domain([0, maxnumber]) 
     .range([0, h]); 

    var y = d3.scale.linear() 
     .domain([0, maxnumber]) 
     .range([h - padding, padding]); 

    svg.selectAll("rect") 
     .data(dataset) 
     .enter() 
     .append("rect") 
     .attr("x", function(d, i) { 
      return i * (w/dataset.length); 
     }) 
     .attr("y", function(d) { 
      return h - (yScale(d[1])); 
     }) 
     .attr("width", w/dataset.length) 
     .attr("height", function(d) { 
      return yScale(d[1]); 
     }) 

    // define the y axis 
    var yAxis = d3.svg.axis() 
     .orient("left") 
     .scale(y); 

    // define the y axis 
    var xAxis = d3.svg.axis() 
     .orient("bottom") 
     .scale(xScale); 

    // draw y axis 
    svg.append("g") 
     .attr("transform", "translate(" + padding + ",0)") 
     .attr('class', 'y axis') 
     .call(yAxis); 

    // draw x axis 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + (h - padding) + ")") 
     .call(xAxis); 

Answer 1

Взгляните на Margin Convention, который делает именно то, что вам нужно. См. http://codepen.io/anon/pen/JRovxV?editors=0010 для обновленной версии:

var margin = {top: 20, right: 10, bottom: 60, left: 60}; 
var width = 780 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 
var svg = d3.select("#graph") 
    .append("svg:svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
    .attr('class', 'gdp'); 

// define the x scale (horizontal) 
var mindate = new Date(1947, 0, 1), 
    maxdate = new Date(2015, 6, 1); 

// var firstDate = dataset[0]; 
// var lastDate = dataset[dataset.length - 1][0]; 

var xScale = d3.time.scale() 
    .domain([mindate, maxdate]) 
    .range([0, width]); 

var maxnumber = d3.max(dataset, function(d) { 
    return d[1] 
}); 

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

var y = d3.scale.linear() 
    .domain([0, maxnumber]) 
    .range([height, 0]); 

svg.selectAll("rect") 
    .data(dataset) 
    .enter() 
    .append("rect") 
    .attr("x", function(d, i) { 
     return i * (width/dataset.length); 
    }) 
    .attr("y", function(d) { 
     return height - (yScale(d[1])); 
    }) 
    .attr("width", width/dataset.length) 
    .attr("height", function(d) { 
     return yScale(d[1]); 
    }) 

// define the y axis 
var yAxis = d3.svg.axis() 
    .orient("left") 
    .scale(y); 

// define the y axis 
var xAxis = d3.svg.axis() 
    .orient("bottom") 
    .scale(xScale); 

// draw y axis 
svg.append("g") 
    //.attr("transform", "translate(" + padding + ",0)") 
    .attr('class', 'y axis') 
    .call(yAxis); 

// draw x axis 
svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis);