Estoy tratando de reproducir un gráfico de coordenadas paralelas en d3.js siguiendo este tutorial de la galería de gráficos d3 js y mi escala xey no parece funcionar correctamente. Si pruebo console.log(x.domain[0]) obtengo undefined y pasar un valor válido a la escala x da NaN . Las escalas se definen de la siguiente manera:

 var dimensions = ["Petal_Length", "Petal_Width", "Sepal_Length", "Sepal_Width"]; const x = d3.scalePoint() .domain(dimensions) .range([0, width]); const y = {}; for (var i in dimensions) { var dim_name = dimensions[i]; y[dim_name] = d3.scaleLinear() .domain([0, 8]) .range([height, 0]); }

Finalmente, estoy usando una función para establecer el atributo d de la siguiente manera:

 function path(d) { return d3.line()(dimensions.map(function(k) { console.log('Retuned from path function: ', k, typeof k, x.domain[0], y['Petal_Width'](d['Petal_Width'])); return [x(k), y[k](d[k])]; })) } svg.selectAll('conceptPaths') .data(conceptImportanceData) .enter() .append('path') .attr('class', function(d) { return 'line ' + d.Species }) .attr('d', path) .style('fill', 'none') .style('stroke', function(d) { return color(d.Species) }) .style('opacity', '0.6') .on('mouseover', highlight) .on('mouseout', removeHighlight);

Soy bastante nuevo en d3, así que no puedo entender lo que me estoy perdiendo aquí. Además, el conjunto de datos que es un csv se ve a continuación:

 Sepal_Length,Sepal_Width,Petal_Length,Petal_Width,Species 5.1,3.5,1.4,0.2,setosa 4.9,3,1.4,0.2,setosa