CODEWITHSUNDEEP
d3.jsdata-visualization
BS100
BS100

Reputation: 873

d3 line function works only when I include a dummy parameter in the line function. why?

even if all the values are right before it reaches to the drawing part, the code below keeps returrning error message

Expected number, "MNaN,NaNLNaN,NaNL…".

my lineRadial function is as below.

var radarLine = d3.lineRadial()
        .radius(function(d) {

            return rscale(d.value)
        })
        .angle(function(i) { return i * angleSlice })

And i called this function to draw radial chart like below.

var blobWrapper = g.selectAll(".radarWrapper")
        .data(data)
        .join('g')
        .attr("class", "radarWrapper")

blobWrapper.append('path')
            .attr('class', 'radarArea')
            .attr('d', function(d) { return radarLine(d); })
            .style('fill', function(d, i) { return cfg.color[i] })
            .style('fill-opacity', cfg.opacityArea)

I fixed this error by putting one dummy parameter in the line function.

var radarLine = d3.radialLine()
    .radius(function(d) {
        return rscale(d.value)
    })
    .angle(function(d, i) { return i * angleSlice })

just by adding 'd' parameter to the angle function, it started working. why is it?

Upvotes: 3

Views: 131

Answers (2)

Gerardo Furtado
Gerardo Furtado

Reputation: 102188

That's not a dummy parameter (or an argument, from the callback function point of view).

The angle function's...

accessor will be invoked for each defined element in the input data array, being passed the element d, the index i, and the array data as three arguments. (source)

Therefore, if you use..

angle(function(i) { return i * angleSlice })

That i is not the index, no matter if you call it i, d, α or whatever. The index, which is what you want, will be always the second parameter.

Finally, there is a Javascript convention that says we use _ to indicate that the parameter is not used. That being said, you'd have:

angle(function(_, i) { return i * angleSlice })

Upvotes: 3

Andrew Reid
Andrew Reid

Reputation: 38191

The name of the parameters doesn't matter, only their order.

The first parameter passed to the accessor functions of d3.line or d3.lineRadial is the point being plotted, conventionally labelled as d, but it doesn't matter what you use.

The second parameter passed is the index of the current point. Conventionally labelled i.

The third parameter is the entire data array of all the points, rarely seen, so there is not really a conventional name for it in the d3 idiom.

So, in your non-working code:

 .angle(function(i) { return i * angleSlice })

i, as the first parameter, represents an item in the data array, which is an object, and doesn't produce a number when multiplied by a constant.

This is why you need to use:

.angle(function(d,i) { return i * angleSlice })

As the 2nd parameter is the index you're looking for. Sometimes you'll see an underscore used for an unused parameter, rather than use d.

Upvotes: 3

Related Questions