D3: scale.domain is undefined

Question

I'm trying to reproduce a parallel coordinates chart in d3.js by following this tutorial from d3 js graph gallery and my x and y scale don't seem to be working correctly. If I try console.log(x.domain[0]) I get undefined and passing a valid value to the x scale gives NaN. The scales are defined in the following ways:

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]);
            }

Finally I am using a function to set the d attribute as follows:

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);

I'm quite new to d3 so, can't figure out what I am missing here. Also, the dataset which is a csv looks like below:

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

Answer 1

For someone who might be looking for solutions to this kind of a problem.

Thanks to @Gerardo I was able to figure out that domain was indeed working as expected for my scale. I was dynamically fetching the height and width of the svg and they were the ones that were undefined.

Since I was using them to set my range the output from my scale was always NaN.