CODEWITHSUNDEEP
javascriptcssd3.js
Dan
Dan

Reputation: 741

How to rotate all text by x degree on x-axis in Javascript

I copied the below snippet form D3 (https://www.d3-graph-gallery.com/graph/arc_highlight.html) to create an arc-diagram

var margin = { top: 20, right: 30, bottom: 20, left: 30}, 
                       width = 1100 - margin.left - margin.right,  
                       height = 400 - margin.top - margin.bottom;
            
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
            .append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom)
            .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");         

var data = { "nodes": [{ "id": 1, "name": "uto-ujamaki"}, {"id": 2, "name": "saske-uchiha"}.......], "links": [{"source": 1, "target": 2}, {"source": 1, "target": 5 }......]};

// List of node names
var allNodes = data.nodes.map(function(d){ return d.name })
            
// A linear scale to position the nodes on the X axis
var x = d3.scalePoint().range([0, width]).domain(allNodes)
            
// Add the circle for the nodes
var nodes = svg.selectAll("mynodes").data(data.nodes).enter().append("circle")
                                    .attr("cx", function(d){ return(x(d.name))})
                                    .attr("cy", height-30).attr("r", 8)
                                    .style("fill", "#69b3a2")
            
// And give them a label
var labels = svg.selectAll("mylabels").data(data.nodes).enter().append("text")
                                    .attr("x", function(d){ return(x(d.name))})
                                    .attr("y", height-10)
                                    .text(function(d){ return(d.name)})
                                    .style("text-anchor", "middle")
   // <------ below attribute, it work but rotate whole x-axis instead of node text ----> 
                                 // .attr("transform", "translate(250, 0) rotate(60)")

Now the x-axis has labels that are placed horizontally and it overlaps when there is a large number of data/nodes.

I thought to rotate the text on the axis by some degree (say 60) to avoid overlapping but when I add the transform attribute it rotates the whole axis instead of node text by 60 degrees. I am a newbie to styling.

enter image description here

Solution template

I wished I would have found below link before posting this question, anyways thanks to community. https://www.d3-graph-gallery.com/graph/arc_template.html

Upvotes: 0

Views: 128

Answers (1)

Abhishek
Abhishek

Reputation: 89

In your code translate function x and y values are hard coded that is why it is causing the issue

Edit:1

 var labels = svg
    .selectAll("mylabels")
    .data(data.nodes)
    .enter()
    .append("text")
      .attr("x", function(d){ return(0)})
      .attr("y", 0)
      .text(function(d){ return(d.name)})
      .attr("transform", function(d){ console.log(d); return( "translate(" + (x(d.name)) + ", " + (height-15) + ") rotate(-45)")})
.style("text-anchor", "middle")

Above changes will work

Upvotes: 1

Related Questions