0
85
VistasD3 escala lineal entre dos números
Me gustaría generar escala con d3 (v7) entre 180 y 360 (inclusive) con 4 ticks. En realidad necesito una escala con valores/ticks: 180, 240, 300 y 360.
cansé esto:
d3.scaleLinear() .domain([180, 360]).ticks(4)pero obtengo:
[200, 250, 300, 350] ¿Alguien sabe cómo generar escala para obtener los ticks mencionados anteriormente [180, 240, 300, 360]
EDITADO
Intento generar escala/eje para algún gráfico:
const yScale = d3.scaleLinear() .domain([180, 360]) .range([containerHeight, 0]); const yAxis = d3.axisLeft(yScale) .ticks(4); svg.append('g') .call(yAxis);Como puede ver, la escala en el eje es incorrecta. En lugar de 180, 240, 300 y 300 me sale 200, 250, 300 y 350
·
Santiago Gelvez
1 Respuestas
Responde la pregunta0
Si solo desea una matriz con valores dados un inicio, final y conteo, no necesita d3 para eso.
const ticks = 4; const start = 180; const end = 360; console.log(Array.from({length: ticks}, (_, i) => i * (end - start) / (ticks - 1) + start))Esto crea la matriz [180, 240, 300, 360], así que simplemente conéctelo en lugar del código d3 como lo he hecho a continuación a través de tickValues...
let svg = d3.select("body") .append("svg") .attr("width", 300) .attr("height", 150); const yScale = d3.scaleLinear() .domain([180, 360]) .range([100, 0]); const yAxis = d3.axisLeft(yScale) .tickValues(Array.from({length: 4}, (_, i) => i * 60 + 180)); svg.append('g').attr("transform", "translate(50,10)") .call(yAxis); <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
·
Santiago Gelvez
Denunciar
Responde la pregunta