d3.js -一起旋转轴和长方体

Question

我想用文本旋转轴和框的位置(位置已旋转，但框不旋转)，目前只有轴已旋转！

​

test()
function test() {
  var width = 800
  var height = 600
  var margin = 20
  var svg = d3.select('body').append('svg')
      .attr('width',width).attr('height',height)
      .style('border','1px solid red')

  var g = svg.append('g')
      .attr("transform", `translate(${margin}, ${margin})`)
  var data = [
      {
      pos:0,
      name:'A'
      },            
      {
      pos:2,
      name:'B'
      },      
      {
      pos:12,
      name:'C'
      },
      {
      pos:15,
      name:'D'
      },
      {
      pos:20,
      name:'E'
      },
      {
      pos:23,
      name:'F'
      },
      {
      pos:26,
      name:'G'
      },
  ];

  var xranges = data.map(function(d){
      return d.pos
  }) 
  
  var scalelinear = d3.scaleLinear()
      .domain([d3.min(xranges), d3.max(xranges)])
      .range([0, width-2*margin]);
  
  var scalepoint = d3.scalePoint()
      .domain(xranges)
      .range([0, width-2*margin]);

  var scale = scalepoint
  var x_axis = d3.axisTop()
      .scale(scale)
  
  g.append("g")
    .call(x_axis)
      .attr("transform", `translate(0, 5) rotate(30)`)
  var iw = 48
  var ih = 80

  var g1 = g.selectAll(null)
      .data(data).enter()
      .append('g')
      .attr("transform", `translate(0, 5)`)
  
    g1.append('rect')
    .attr('x', d => scale(d.pos)-iw/2)
    .attr('y', 0)
    .attr('width', iw)
    .attr('height', ih)
    .attr('fill','none')
    .attr('stroke','black')

  g1.append('text')
    .attr('x', d => scale(d.pos))
    .attr('y', ih/2)
    .text(d => d.name)
    .attr('text-anchor','middle')
    .attr('fill','none')
    .attr('stroke','black')
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

​

Answer 1

将旋转应用于顶级组：

​

test()
function test() {
  var width = 800
  var height = 600
  var margin = 20
  var svg = d3.select('body').append('svg')
      .attr('width',width).attr('height',height)
      .style('border','1px solid red')

  var g = svg.append('g')
      .attr("transform", `translate(${margin}, ${margin}) rotate(30)`)
  var data = [
      {
      pos:0,
      name:'A'
      },            
      {
      pos:2,
      name:'B'
      },      
      {
      pos:12,
      name:'C'
      },
      {
      pos:15,
      name:'D'
      },
      {
      pos:20,
      name:'E'
      },
      {
      pos:23,
      name:'F'
      },
      {
      pos:26,
      name:'G'
      },
  ];

  var xranges = data.map(function(d){
      return d.pos
  }) 
  
  var scalelinear = d3.scaleLinear()
      .domain([d3.min(xranges), d3.max(xranges)])
      .range([0, width-2*margin]);
  
  var scalepoint = d3.scalePoint()
      .domain(xranges)
      .range([0, width-2*margin]);

  var scale = scalepoint
  var x_axis = d3.axisTop()
      .scale(scale)
  
  g.append("g")
    .call(x_axis)
      .attr("transform", `translate(0, 5)`)
  var iw = 48
  var ih = 80

  var g1 = g.selectAll(null)
      .data(data).enter()
      .append('g')
      .attr("transform", `translate(0, 5)`)
  
    g1.append('rect')
    .attr('x', d => scale(d.pos)-iw/2)
    .attr('y', 0)
    .attr('width', iw)
    .attr('height', ih)
    .attr('fill','none')
    .attr('stroke','black')

  g1.append('text')
    .attr('x', d => scale(d.pos))
    .attr('y', ih/2)
    .text(d => d.name)
    .attr('text-anchor','middle')
    .attr('fill','none')
    .attr('stroke','black')
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

​