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

D3轴渲染在图形之上

1 个答案: