0
下面的代碼渲染圖形頂部的座標軸,我似乎無法找到在哪裏添加/減去像素來對齊兩者。D3軸渲染在圖形的頂部
我花了週末試圖解決這個問題,但我感覺卡住了。在我的絕望中,我試圖在各個地方添加和減去填充,在這裏和那裏添加邊距以移動東西。這就像圖和軸是在兩個不同的尺度上,但我無法看到我在做什麼。這是我的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);
謝謝! @Owen。我花了一些時間來閱讀「保證金慣例」和你的代碼,他們結合起來,讓我看到我不明白的地方以及我需要學習的地方。 – Leigh