CODEWITHSUNDEEP
javascriptd3.js
Mr. Concolato
Mr. Concolato

Reputation: 2230

D3 Adding data to 3D Pie Chart

Below is my js code from a D3 example found here.

var MsaSubGroup  = svg.append("g").attr("id","MsaSubGroupData").attr("class","pieChart");
Donut3D.draw("MsaSubGroupData", getData(MSA), 450, 150, 130, 100, 30, 0.4);

var wedges = MsaSubGroup.selectAll("g.slices").data(datum).enter();
        wedges.on("mousemove", function(d){ //This is what the browser is complaining about.
            mousex = d3.mouse(this);
            mousex = mousex[0];
            //console.log(d);
            d3.select(this)
                .classed("hover", true);

            tooltip.html(d.label+": " + d.value).style("visibility", "visible").style("left", mousex + "px" );
        });

I have made a few modification to try and add data along with a tool tip. Seemed pretty straight forward in the fact that I just needed to bind the data to the svg. However, I am getting curious error in the console:

Uncaught TypeError: undefined is not a function

What exactly is undefined? When I console.log(datum) I can see the array of objects being returned, so what am I doing wrong?

Thanks so much.

Upvotes: 1

Views: 484

Answers (1)

Oleg
Oleg

Reputation: 9359

Your wedges is the result of the enter() call which:

only defines the append, insert, select and call operators

So it doesn't have any on method and this is what's causing the "undefined is not a function" error.

I'm assuming you want either:

var wedges = MsaSubGroup
        .selectAll("g.slices")
        .on('mousemove', ...);

wedges.data(myData).enter()...

or

var wedges = MsaSubGroup
        .selectAll("g.slices")
        .data(myData)
        .enter()
        .append('g')
        .on('mousemove', ...);

Upvotes: 1

Related Questions