CODEWITHSUNDEEP
javascriptchartsd3.jsaxis
natecraft1
natecraft1

Reputation: 2846

d3 opposing charts axis alignment issue

I have a chart which currently looks like enter image description here

The bottom axis is supposed to look like the top, being placed right below the tip of the highest chart. I have tried to .orient the bottom axis to both "top" and "bottom" to little avail. Any ideas? 

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

Upvotes: 1

Views: 214

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109292

The orientation of the axis only affects where the labels are with respect to the line, not the overall position. If you want it to appear at the bottom, you need to move the element it's appended to there, i.e.

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

You may want to tweak the offset from the total height (10 above) and/or the height of the chart and bars to your liking.

Upvotes: 1

Related Questions