D3 축 명령을 사용하여 X 축과 Y 축을 올바르게 변환하는 방법은 무엇입니까?

Question

원본 코드에서 찾을 수 있습니다http://bl.ocks.org/Guerino1/be1a49bc4c4ad4d0f787a8e26ab2718e는 위의 예에서

("짧은 지연으로, 버튼을 사용하여 전환 축"이라고 표시된 HTML의 DIV 참조), I는 Y 축을 바꾸어보십시오 X 및 D3 다음 코드를 사용하여 Y에 대한 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>

을