Etiquetas de eje anidadas de Javascript D3.js para gráficos radar.

Answer

1. 

   davy.ai

   May 28, 2023 at 5:00 am

   Para agregar etiquetas de ejes anidadas a un gráfico de radar en D3.js, se puede utilizar el método “ticks” junto con una función personalizada “tickFormat” para formatear las etiquetas como sea necesario. El siguiente fragmento de código proporciona un ejemplo de cómo se puede realizar esto:

   var axes = ["Management.sr_lvl_1", "Management.sr_lvl_2", "Management.sr_lvl_3"];
   
   var chart = d3.select("#chart")
     .append("svg")
     .attr("width", width)
     .attr("height", height);
   
   var radialScale = d3.scaleLinear()
     .domain([0, maxValue])
     .range([0, radius]);
   
   var ticks = ["Management", "", "", "", ""];
   
   var axisLabels = chart.append("g")
     .selectAll("text")
     .data(ticks)
     .enter()
     .append("text")
     .attr("x", function(d, i) {
       return radialScale(maxValue * 1.1) * Math.cos(angleSlice * i - Math.PI / 2);
     })
     .attr("y", function(d, i) {
       return radialScale(maxValue * 1.1) * Math.sin(angleSlice * i - Math.PI / 2);
     })
     .text(function(d) {
       return d;
     });
   
   var axis = chart.selectAll(".axis")
     .data(axes)
     .enter()
     .append("g")
     .attr("class", "axis");
   
   axis.append("line")
     .attr("x1", 0)
     .attr("y1", 0)
     .attr("x2", function(d, i) {
       return radialScale(maxValue) * Math.cos(angleSlice * i - Math.PI / 2);
     })
     .attr("y2", function(d, i) {
       return radialScale(maxValue) * Math.sin(angleSlice * i - Math.PI / 2);
     })
     .attr("class", "line");
   
   axis.append("text")
     .attr("class", "legend")
     .attr("text-anchor", "middle")
     .attr("dy", "0.35em")
     .attr("x", function(d, i) {
       return radialScale(maxValue * labelFactor) * Math.cos(angleSlice * i - Math.PI / 2);
     })
     .attr("y", function(d, i) {
       return radialScale(maxValue * labelFactor) * Math.sin(angleSlice * i - Math.PI / 2);
     })
     .text(function(d) {
       var segments = d.split(".");
       var label = segments[0];
       return label;
     })
     .call(wrap, 80);
   
   axis.selectAll(".dot")
     .data(data)
     .enter()
     .append("circle")
     .attr("class", "dot")
     .attr("r", 5)
     .attr("cx", function(d, i) {
       var value = d[axes[i]];
       return radialScale(value) * Math.cos(angleSlice * i - Math.PI / 2);
     })
     .attr("cy", function(d, i) {
       var value = d[axes[i]];
       return radialScale(value) * Math.sin(angleSlice * i - Math.PI / 2);
     });
   

   En este ejemplo, el array “ticks” contiene las etiquetas para los ejes anidados, con una cadena vacía que representa cada subnivel. El grupo “axisLabels” contiene los elementos de texto para las etiquetas anidadas, que se posicionan utilizando coordenadas polares basadas en las variables “angleSlice” y “radialScale”. El método “text” en el elemento “text” del grupo “axis” se utiliza para extraer la etiqueta de nivel superior de cada cadena de etiqueta de eje, antes de envolver el texto utilizando la función “wrap”. El gráfico resultante tendrá etiquetas de eje anidadas con la etiqueta de nivel superior que solo aparecerá una vez.

Comments are closed.