原始代码可以在以下位置找到:http://bl.ocks.org/Guerino1/be1a49bc4c4ad4d0f787a8e26ab2718e(请参见标记为“使用按钮的转换轴,延迟时间短”的HTML div)

在上面的示例中,我尝试使用以下D3代码将Y轴转置为X并将X轴转置为Y ...

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(“ bottom”);
xAxis.orient(“ left”);
              color =“红色”;
            }其他{
              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 =“黑色”;
            }

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

  };


选择按钮后,轴将移动但不会移动到正确的位置,也不会返回到正确的位置。移动后,文本也将反转。

注意:我要过渡文本和行/路径。

什么是正确的方法?

谢谢你的尽心帮助。

最佳答案

如果我理解正确,您想将xAxis替换为yAxis,对吗?在这种情况下,您必须在比例尺和轴上进行所有想要的更改,并在应用更改后转换轴:

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>

07-24 09:52
查看更多