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