Konrad Viltersten Konrad Viltersten - 3 months ago 6
jQuery Question

Unable to re-produce valid data for d attribute of a path

When I create the first set of sectors in my pie chart, it works great. Especially, the attribute d of each path is set correctly.

var grx = chart.selectAll(".sector").data(pie(dataPoints))
.enter().append("g").attr("class", "sector");
grx.append("path").attr("d", arc)
.style("fill", function(d) { return colorsFull(d.value); });

Then, I try to use the same pattern to add a new, inner pie chart. The elements are created, which I can confirm by investigating the DOM structure. However, they're not displayed and, even though it's not shown in the console of the JsFiddle, I got it to have a bunch of NaN.

var gry = chart.selectAll(".subSector").data(pie(drillData))
.enter().append("g").attr("class", "subSector");
gry.append("path").attr("d", sub)
.style("fill", function(d) {return colorsDrill(d.value); });

So, I've got an invalid data for the path but I can't see how it goes wrong. Suggestions?

The fiddle is here.


Your drillData is not in the correct format to pass to your pie function. It looks like this:

    "key": "Category 1",
    "val": [{ "Category": "", "Key": "", Value: 1}, ... ]

Your pie function, though, is expecting an array of objects with a property val that's a number, not an array (this is what the .value does).

I'm guessing you need to subset your drillData to the one you clicked on something like:

 var subData = null;
   if (d.key === key) subData = drillData[i].val;

You now have in subData an array of objects with a property Value that's a number. We are getting closer but now we need to redefine our pie function since it's expecting val, not Value:

  return d.Value;

So, now we can finally call:


without error. But, we still got a problem, now you are trying to build an inner donut chart with 300+ wedges (it ain't going to be pretty).

Here's an updated fiddle where I started fixing things.