D3相對圖表軸對準問題

Question

我有一個圖表目前看起來像

底部軸線應該看起來像頂部，被置於右最高圖表的尖端下方。我試圖將底部軸線定位爲「頂部」和「底部」，但效果並不理想。有任何想法嗎？

var width = 960, 
fullHeight = 850, 
height = 350; 

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

var axisScale = d3.scale.ordinal() 
    .domain(data) 
    .rangeBands([0, width]); 

var axisScale2 = d3.scale.ordinal() 
    .domain(data2) 
    .rangeBands([0, width]); 
    // .range([0, 960]); 

var chart = d3.select(".chart") 
    .attr("width", width) 
    .attr("height", fullHeight); 

var chart1 = chart.append("g") 
    .attr("class", "chart-one") 
    .attr("height", height) 
    .attr("width", width); 


var chart2 = chart.append("g") 
    .attr("class", "chart-two") 
    .attr("transform", function() { return "translate(0," + (height + 70) + ")"; }) 
    .attr("height", height) 
    .attr("width", width); 

var barWidth = width/data.length; 

var bar = d3.select(".chart-one") 
    .selectAll("g") 
    .data(data) 
    .enter().append("g") 
    .attr("class", "one") 
    .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; }); 

bar.append("rect") 
    .attr("y", function(d) { console.log(d, y(d)); return y(d) + 60; }) 
    .attr("height", function(d) { return height - y(d); }) 
    .attr("width", barWidth - 1); 


var bar2 = d3.select(".chart-two") 
    .selectAll("g") 
    .data(data2) 
    .enter().append("g") 
    .attr("class", "two") 
    .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; }); 

bar2.append("rect") 
    .attr("height", function(d) { return height - y(d) }) 
    .attr("width", barWidth - 1); 

var xAxis = d3.svg.axis() 
    .scale(axisScale) 
    .tickValues(data); 
    // .tickPadding([-10]); 
    // .orient("top"); 
var xAxis2 = d3.svg.axis() 
    .scale(axisScale2) 
    .tickValues(data2) 
    .tickPadding([15]); 

var xAxis3 = d3.svg.axis() 
    .scale(axisScale) 
    .tickValues(data) 
    .tickPadding(27); 

var xBotAxis = d3.svg.axis() 
    .scale(axisScale) 
    .orient("top") 
    .tickValues(data); 

d3.select(".chart-one").append("g").attr("class", "axis").call(xAxis); 
d3.select(".chart-one").append("g").attr("class", "axis").call(xAxis2); 
d3.select(".chart-one").append("g").attr("class", "axis").call(xAxis3); 

d3.select(".chart-two").append("g").attr("class", "axis").call(xBotAxis); 

Answer 1

軸的方向僅影響標籤相對於線的位置，而不是整個位置。如果你希望它出現在底部，你需要移動它添加到那裏的元素，即

d3.select(".chart-two").append("g") 
    .attr("transform", "translate(0," + (height-10) + ")") 
    .attr("class", "axis") 
    .call(xBotAxis); 

您可能需要調整從總高度（10以上）和/或高度偏移圖表和酒吧根據你的喜好。