0
203
VisualizaçõesD3: use un campo alternativo para etiquetas de eje con scaleBand
Estoy trabajando en un gráfico D3 (V5) de un conjunto de datos que incluye JobCode (único) y JobTitle (no único). Necesito usar JobCode para el eje, pero me gustaría mostrar JobTitle como etiqueta.
Código relevante:
const xScale = d3.scaleLinear().domain([0,d3.max(grouped, d => d.jobCodeMax)-d3.min(grouped, d => d.jobCodeMax)]).range([0,width-margin.left-margin.right]); const yScale = d3.scaleBand().domain(grouped.map(d => d.all[0].jobCode)).range([0,height - margin.top - margin.bottom]).padding(0.3); const yAxis = d3.axisLeft(yScale); const xAxis = d3.axisTop(xScale); const radius = yScale.bandwidth()/2.75 const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) yAxis(g.append("g")); xAxis(g.append("g")); Puedo acceder a jobTitle s con d.jobTitle .
Mi plan tentativo es abandonar la función d3.axisLeft() y dibujar la mía. ¿Existe un método más sencillo? ¿Algo así como un parámetro para d3.axisLeft() donde especifico un campo alternativo?
Gracias por cualquier idea.
1 Respostas
Responde à pergunta0
El dominio de d3.scaleBand :
... Los valores de dominio se almacenan internamente en un
InternMapdesde el valor primitivo hasta el índice; el índice resultante se utiliza luego para determinar la banda. Por lo tanto, los valores de una escala de banda deben ser coercibles a un valor primitivo, y el valor del dominio primitivo identifica de forma única la banda correspondiente. ...
InternMap extiende un objeto Map estándar que, para que podamos ver que los valores en el domain de un scaleBand deben ser únicos.
Para obtener el resultado que desea, puede cambiar los valores de texto a jobTitle después de que se represente el eje, por ejemplo:
// replace text values on y axis yLabels = d3.selectAll(".yaxis g text"); yLabels.each(function(d, i) { d3.select(this).text(data[i].alias) });Usando funciones de flecha, el equivalente es:
// arrow function way yLabels = d3.selectAll(".yaxis g text"); yLabels.each((d, i, n) => d3.select(n[i]).text(data[i].alias))Ejemplo de trabajo a continuación:
const margin = {top: 10, bottom: 30, left: 60, right: 10} const width = 500 - margin.left - margin.right; const height = 180 - margin.top - margin.bottom; const svg = d3.select("body") .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})`); const data = [ {group: "A", value: 3, alias: "foo"}, {group: "B", value: 1, alias: "foo"}, {group: "C", value: 2, alias: "bar"}, {group: "D", value: 5, alias: "bar"}, {group: "E", value: 4, alias: "bar"} ]; const xScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .range([0, width]); const yScale = d3.scaleBand() .domain(data.map(d => d.group)) .range([height, 0]) .padding(.2); const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); const gXAxis = svg.append("g") .attr("transform", `translate(0, ${height})`) .call(xAxis); const gYAxis = svg.append("g") .attr("class", "yaxis") .call(yAxis); svg.selectAll(".bar") .data(data) .enter() .append("rect") .attr("x", xScale(0)) .attr("y", d => yScale(d.group)) .attr("width", d => xScale(d.value)) .attr("height", yScale.bandwidth()) .attr("fill", "steelblue"); // replace text values on y axis yLabels = d3.selectAll(".yaxis g text"); yLabels.each(function(d, i) { d3.select(this).text(data[i].alias) }); // arrow function way //yLabels.each((d, i, n) => d3.select(n[i]).text(data[i].alias)) <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>