CODEWITHSUNDEEP
javascriptjqueryd3.jssvgpath
Konrad Viltersten
Konrad Viltersten

Reputation: 39298

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.

Upvotes: 0

Views: 26

Answers (1)

Mark
Mark

Reputation: 108567

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;
 drillData.forEach(function(d,i){
   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:

pie.value(function(d){
  return d.Value;
});

So, now we can finally call:

pie(subData)

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.

Upvotes: 1

Related Questions