CODEWITHSUNDEEP
javascriptsvgd3.js
Johnny H.
Johnny H.

Reputation: 15

Passing a parameter to an d3.svg.line var

I am using d3js v3 and I am trying to create a sparkline by calling a line function with a parameter. When I do this:

.attr("d", line)

I get a d attribute in my svg path element. But when I do:

.attr("d", function(d){line(d);})

the d attribute is not added to the dom. I have tried renaming the variable to something not used elsewhere in the script. It did not help.

My line function is this:

var line = d3.svg.line()
    .x(function (d) {
        return x(d.t);
    })
    .y(function (d) {
        return d.v * -20;
    })
    .interpolate("basis")
;

My x and xAxis functions are here:

var x = d3.time.scale().range([0, width]).domain([t0, t1]).nice(),
    xAxis = d3.svg.axis().scale(x).tickFormat(customTimeFormat)
;

And for y I have:

var y = d3.scale.ordinal()
    .domain(["","A", "B", "C", "D", "E", "F", "G", "H", "I"])
    .range([0,-20,-40,-60,-80,-100,-120,-140,-160,-180])
;

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
;

If I add log statements, I can see that all functions are called as expected, and even when I log the output of line(d) to the console, I can see the complete "d" attribute as it should be, but it does not end up in the dom.

What am I doing wrong?

Upvotes: 1

Views: 1851

Answers (1)

Scott Cameron
Scott Cameron

Reputation: 5323

When you do this:

.attr("d", line)

You are passing in line as a function reference which will be invoked as a callback and passed d as an argument. The return value of this function will be assigned to the attribute.

When you do this:

.attr("d", function(d){line(d);})

You are passing your newly defined function in as a reference which will be invoked as a callback just like above. It is the return value of this function that will be assigned to the attribute. Because your function is invoking line(d) itself, you need to return its return value from your function:

.attr("d", function(d) { return line(d); })

Upvotes: 3

Related Questions