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）和/或圖表和條形圖的高度的偏移量。