d3.js - rotate axis and boxes together - d3.js

Question

I would like to rotate the axis and the boxes location with text (location rotated but keep box not rotated), currently only the axis has been rotated!
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

Apply rotate to the top-level group:
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>