score:1

Accepted answer

If I understand correctly, you want to swap the xAxis for the yAxis, is that right? In that case, you have to do all the changes you want in the scales and the axis and, after applying the changes, transitioning the axis:

d3.transition(svg)
    .select(".x.axis")//this class was previously applied
    .transition()
    .duration(2000)
    .call(xAxis);

Check this snippet:

var width = 400, height = 400, flag = true;
var svg = d3.select("#svgdiv")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var xScale = d3.scale.ordinal()
  .domain("ABCDEFGHIJ".split(""))
  .rangeBands([30, width - 20]);

var yScale = d3.scale.linear()
  .domain([0, 10])
  .range([height - 20, 20]);

var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left");

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", `translate(0,${height-20})`)
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(30, 0)")
  .call(yAxis);

//here is the code for transposing the axes:

d3.select("#myButton").on("click", function(){

  if(flag){
    yAxis.orient("bottom");
    xAxis.orient("left");
xScale.domain("ABCDEFGHIJ".split(""))
  .rangeBands([width - 20, 30]);
yScale.domain([0, 10])
  .range([20, height - 20]);
  } else {
    yAxis.orient("left");
    xAxis.orient("bottom");
xScale.domain("ABCDEFGHIJ".split(""))
  .rangeBands([30, width - 20]);

yScale.domain([0, 10])
  .range([height - 20, 20]);
  };
  
  d3.transition(svg)
    .select(".x.axis")
    .transition()
    .duration(2000)
    .attr("transform", function(){
      if(flag){
      return "translate(30, 0)"
      } else { return `translate(0,${height-20})`}})
    .call(xAxis);

  d3.transition(svg)
    .select(".y.axis")
    .transition()
    .duration(2000)
    .attr("transform", function(){
      if(!flag){
      return "translate(30, 0)"
    } else { return `translate(10,${height-20})`}})
    .call(yAxis);
  
    flag = !flag;
  
});
.axis path,
.axis line {
  fill: none;
  stroke: #aaa;
  shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<button id="myButton">Swap</button>
<div id="svgdiv"></div>


Related Query