Soy nuevo creando gráficos con d3 y estoy tratando de construir un gráfico de líneas con eje ordinal. He logrado visualizar correctamente el eje y y el eje x, pero no soy capaz de crear la línea.

tengo este codigo:

 var margin = {top: 10, right: 30, bottom: 30, left: 60}, width = 460 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; var data = [{ name: "cat", value: 10 }, { name: "dog", value: 3 }, { name: "pig", value: 7 }, { name: "bird", value: 7 }]; //append the svg object to the body of the page var svg = d3.select("#div-svg" ).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 + ")"); //set scale var xScale = d3.scaleBand() .domain(d3.extent(data, function(d){return d["name"]})) .range([0, width]), yScale = d3.scaleLinear() .domain([min(this.value_array), max(this.value_array)]) .range([height, 0]); //add Axis svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)); svg.append("g") .call(d3.axisLeft(yScale));

Hasta aquí todo funciona bien. La siguiente parte es la que no funciona.

 //line var line = d3.line() .x(function(d) { return xScale(d[0]); }) .y(function(d) { return yScale(d.value); })

Si pongo d[0] , aparece el siguiente error "el número de tipo no se puede asignar al parámetro de la cadena de enlace ". Si pongo d.name obtengo el siguiente error " 'name' does not exist on type [number,number] ". No sé cómo proceder para mostrar el gráfico. ¿Tienes alguna solución?

También me gustaría que fuera un gráfico de áreas, no solo un gráfico de líneas, en caso de que cambie el procedimiento.