Estoy tratando de trazar algunos números en el eje y que corresponden a cadenas en el eje x usando d3.js versión 7. No estoy seguro de qué escala x usar. Estoy probando scaleOrdinal pero la trama no es correcta. Me gustaría que las cuerdas estuvieran espaciadas uniformemente en el eje x con un poco de relleno en los extremos.
const data = [{str: 'a', num: 1}, {str: 'b', num: 3}, {str: 'c', num: 2}, {str: 'd', num: 0}]; 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 xScale = d3.scaleOrdinal() .domain(d3.extent(data, function (d) { return d.str; })) .range([0, width]); var yScale = d3.scaleLinear() .domain([0, 5]) .range([height, 0]); svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)) .style('color', '#80ffffff') .style('font-size', 20) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em"); svg.append("g") .call(d3.axisLeft(yScale)) .style('color', '#80ffffff'); const valueline = d3.line() .x(function (d) { return xScale(d.str); }) .y(function (d) { return yScale(d.num); }); svg.append("path") .data([data]) .attr("class", "line") .attr("d", valueline) .style("fill", "none") .style("stroke", '#ff0000ff') .style("stroke-width", 1);La escala ordinal no es la correcta aquí, principalmente porque las escalas ordinales deben tener dominio y rango discretos (es decir, cualitativos, categóricos).
Lo que quieres es una escala de puntos . Además, preste atención al hecho de que d3.extent solo devuelve 2 valores (en su caso, "a" y "d" ), por lo que lo que desea es un Array.prototype.map normal. Dicho esto, su escala es:
const xScale = d3.scalePoint() .domain(data.map(function (d) { return d.str; })) .range([0, width]) .padding(yourPaddingHere)