Estoy haciendo un gráfico de dispersión (gráfico de puntos) de más de un conjunto de datos usando d3.
Para este propósito, necesito un eje x en la parte superior para mostrar los nombres de los conjuntos de datos. Pero estas etiquetas de texto deben tener los mismos colores que los puntos/círculos del conjunto de datos particular en el gráfico para ver qué puntos pertenecen a qué conjunto de datos.
Estoy tratando de usar los atributos "trazo" y "relleno" para hacer esto, pero no puedo hacer que funcione. Y los colores del texto son todos iguales en lugar de diferentes como se desee.
Aquí está mi código hasta ahora:
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>Colored x axis</title> </head> <body> <!-- Create a div where the graph will take place --> <div id="my_dataviz"></div> <!-- Load d3.js --> <script src="https://d3js.org/d3.v4.js"></script> <script> // set the dimensions and margins of the graph var margin = {top: 10, right: 30, bottom: 30, left: 40}, width = 460 - 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 strings = ["Data Set 1","Data Set 2","Data Set 3"]; var xtop = d3.scaleBand().domain(strings).range([0, width]); var xAxisTop = d3.axisTop(xtop); var colors = ["#AC5503","#DF3511","#AE9922"]; svg .append('g') .data(colors) .attr('transform', 'translate(0,10)') .attr("style",(d,i) => "font-size:22px; stroke:" + colors[i] + "; fill:" + colors[i] + ";") .call(xAxisTop.tickSize(0)) .select(".domain").remove(); </script> </body> </html>Cualquier ayuda es muy apreciada, gracias.
Después de agregar el eje, puede seleccionar todas las etiquetas de marca y establecer sus atributos en consecuencia. He actualizado tu código:
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>Colored x axis</title> </head> <body> <!-- Create a div where the graph will take place --> <div id="my_dataviz"></div> <!-- Load d3.js --> <script src="https://d3js.org/d3.v4.js"></script> <script> // set the dimensions and margins of the graph var margin = {top: 30, right: 30, bottom: 30, left: 40}, width = 460 - 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 strings = ["Data Set 1","Data Set 2","Data Set 3"]; var xtop = d3.scaleBand().domain(strings).range([0, width]); var xAxisTop = d3.axisTop(xtop).tickSize(0); var color = d3.scaleOrdinal() .domain(strings) .range(["#AC5503","#DF3511","#AE9922"]); svg.append('g') .call(xAxisTop) .call(g => g.selectAll('.tick > text') .attr('font-size', 22) .attr('fill', d => color(d))) .call(g => g.select('.domain').remove()); </script> </body> </html>