D3軸コマンドを使用してX軸とY軸を正しく転位する方法は？

Question

オリジナルコードはで見つけることができる：上記の例でhttp://bl.ocks.org/Guerino1/be1a49bc4c4ad4d0f787a8e26ab2718e（「短い遅延とボタンを使用してトランジション軸、」標識されたHTMLのDIVを参照）

、Iは、Y軸を転置しよう以下D3コードを使用してYにXとX軸に...

function draw70(xAxisData, yAxisData, selectString) 
    { 

    var flag = true; 
    var w = 500; 
    var h = 400; 
    var marginLeft = 10; 
    var marginRight = w - 10; 
    var marginTop = 20; 
    var marginBottom = h - 20; 

    var lineData = []; 
    var pt1 = {x: 0, y: 0}; 
    lineData.push(pt1); 
    var pt2 = {x: 0, y: h}; 
    lineData.push(pt2); 
    var pt3 = {x: w, y: h}; 
    lineData.push(pt3); 
    var pt4 = {x: w, y: 0}; 
    lineData.push(pt4); 
    var pt5 = {x: 0, y: 0}; 
    lineData.push(pt5); 

    var lineFunction = d3.svg.line() 
     .x(function(d) { return d.x; }) 
     .y(function(d) { return d.y; }) 
     .interpolate("linear"); 

    var canvas = d3.select(selectString).append("svg") 
     .attr("height", h) 
     .attr("width", w) 

    // Put a border around the canvas for visual effects 
    canvas.append("path") 
     .attr("d", lineFunction(lineData)) 
     .attr("stroke", "blue") 
     .attr("stroke-width", 4) 
     .attr("fill", "none"); 

    // InnerCanvas is the offset canvas, that is offset away 
    // from the margins, using the transform/translate for the 
    // entire canvas, instead of just for individual axis. 
    var innerCanvas = canvas.append("g") 
     .attr("transform", "translate(60,10)"); 

    // Setup y axis : Range is the length of the line 
    // NOTE: A value of "1" for rangeRoundBands allows points 
    // to be centered over the ordinal text markers 
    var yAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([marginBottom-20, marginTop], 1); 
    var yAxis = d3.svg.axis().scale(yAxisScale).orient("left"); 
    var yAxisGroup = innerCanvas.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    // Setup x axis : Range is the length of the line 
    // NOTE: A value of "1" for rangeRoundBands allows points 
    // to be centered over the ordinal text markers 
    var xAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([0, (marginRight-100)], 1); 
    var xAxis = d3.svg.axis().scale(xAxisScale).orient("bottom"); 
    var xAxisGroup = innerCanvas.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0,354)") 
     .call(xAxis); 

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

     var color; 
     if (flag) { 
      //yAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([marginBottom-20, marginTop], 1); 
      //xAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([0, (marginRight-100)], 1); 
      yAxisScale = d3.scale.ordinal().domain(xAxisData).rangeRoundBands([marginTop, marginBottom-20], 1); 
      xAxisScale = d3.scale.ordinal().domain(yAxisData).rangeRoundBands([(marginRight-100), 0], 1); 

yAxis.orient（ "底部"）。 xAxis.orient（ "left"）; color = "red"; } else { yAxisScale = d3.scale.ordinal（）。domain（yAxisData）.rangeRoundBands（[marginBottom-20、marginTop]、1）; xAxisScale = d3.scale.ordinal（）。domain（xAxisData）.rangeRoundBands（[0、（marginRight-100）]、1）; yAxis.orient（ "bottom"）; xAxis.orient（ "left"）; color = "black";ボタンを選択すると }

 flag = !flag 

     // Transitions the Y axis to X value set. 
     var yTransitions = innerCanvas.selectAll(".y.axis") 
      .transition() 
      .duration(2000) 
      .delay(200) 
      .attr("fill", color) 
      .attr("transform", function(){ 
       if (flag){ 
        return "transform(0, 354)"; 
       } else { 
        return "transform(marginTop, marginBottom-20)"; 
        //return "transform(marginBottom-20, marginTop)"; 
       }; 
       } 
      ) 
      .call(yAxis); 

     // Transitions the X axis to Y value set. 
     var xTransitions = innerCanvas.selectAll(".x.axis") 
      .transition() 
      .duration(2000) 
      .delay(200) 
      .attr("fill", color) 
      //.attr("transform", "translate(0,354)") 
      .attr("transform", function(){ 
       if (flag){ 
        return "transform(marginTop, marginBottom-20)"; 
        //return "transform(marginBottom-20, marginTop)"; 
       } else { 
        return "transform(0, 354)"; 
       }; 
       } 
      ) 
      .call(xAxis); 

     }) 
     .on("mouseover", function(){ 
     var thisObject = d3.select(this); 
     thisObject.style({"background-color": "DarkGreen"}); 
     }) 
     .on("mouseleave", function(){ 
     var thisObject = d3.select(this); 
     thisObject.style({"background-color": "#4CAF50"}); 
     }); 

    }; 

は、軸がなく、正しい場所に移動し、また彼らは右の場所に戻ってください。また、テキストは移動後に元に戻されます。

注：テキストと行/パスの両方を移行したいとします。

これは正しい方法はありますか？

ご協力いただきありがとうございます。

Answer 1

私が正しく理解していれば、yAxisのxAxisを交換したいですね。このスニペットをチェック

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

：

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>

その場合、あなたはすべてのあなたがスケールに必要な変更および軸と、変更を適用した後、軸の移行を行う必要があります