Wrong number of elements rendered

JavaScript
1

I’m doing the Treemap Diagram and I’m using the Video Game dataset.
Here’s my code:

document.addEventListener("DOMContentLoaded", function() {
  $.getJSON(
    "https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json",
    function(dataset) {
      const w = 1000;
      const h = 600;
      const tooltip = d3
        .select("body")
        .append("div")
        .attr("class", "tooltip")
        .attr("id", "tooltip");
      const container = d3
        .select("body")
        .append("svg")
        .attr("height", h)
        .attr("width", w);
      for (let i=0; i < dataset.children.length; i++) {
        container
          .selectAll("rect")
          .data(dataset.children[i].children)
          .enter()
          .append("rect")
          .attr("class", "tile")
          .attr("data-name", d => d.name)
          .attr("data-category", d => d.category)
          .attr("data-value", d => d.value);
      }
    }
  );
});

However, I get only 15 rect elements… Why is this so? What am I doing wrong> Any help would be appreciated!

2

I found this article which may be of use. However, I went to the solution to look for clues and found it was using
d3.hierarchy(data)
and .leaves() functions to do the magic. There are no for loops needed.
To be honest, I didn’t understand the code of the official solution.:tired_face:

3

I don’t entirely understand for loops in D3. I was under the impression you didn’t need them.

That being said, I’m sure there’s some way to do it in one long line of arguments, but, baring that, what if you did a for loop to split the code up outside of D3 and then used D3 to iterate through the data normally?

So essentially you break the json up ahead of time then you can go through the data normally as if it wasn’t nested.

4

That’s what I ended up doing.

1 Like