Visualize Data with a Treemap Diagram- Can't Append Rect elements to my legend

Tell us what’s happening:

Take a look at this codepen that I’ve forked:

I am able to append rectangle elements to my SVG and get the main treemap displayed, but no technique for appending ‘rect’ elements works when it comes to my legend. I have appended two text-based elements to each ‘g’ in my legend just to demonstrate to myself that the groups each exist and are referencing the correct dataset.

Does anyone see a reason why I can’t append ‘rect’ elements to these legendgroups?

// main references: 
// https://bl.ocks.org/mbostock/4063582
// https://d3indepth.com/layouts/


  const url = 'https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json';
  const svg = d3.select('body').append('svg')
    .attr('width',2000).attr('height',2000);

d3.json(url, function (data){
  
  
  var ordinal = d3.scaleOrdinal()
  .domain(["Product Design", "Tabletop Games", "Gaming Hardware", "Videogames", "Sound","Television","Web","Hardware","Games","3D Printing","Technology","Wearables","Sculpture","Apparel","Food","Art","Gadgets","Drinks"])
  .range([ "rgb(153, 107, 195)", "rgb(56, 106, 197)", "rgb(93, 199, 76)", "rgb(223, 199, 31)", "rgb(234, 118, 47)","rgb(244, 66, 66)","#c4ff9b","rgb(78, 173, 162)","rgb(253, 255, 155)","rgb(255, 216, 155)"],"rgb(255, 179, 155)","rgb(155, 255, 184)");
  
  //console.log(ordinal("Games"));
 const categories=[ "Product Design", "Tabletop Games", "Gaming Hardware", "Videogames", "Sound","Television","Web","Hardware","Games","3D Printing","Technology","Wearables","Sculpture","Apparel","Food","Art","Gadgets","Drinks"];
  
  const root = d3.hierarchy(data);
  const treemapLayout = d3.treemap();
  treemapLayout.size([2000,2000]).paddingInner(15);
  
  root.sum(function(d){return d.value});
  treemapLayout(root);
  
  var nodes = d3.select('svg').selectAll('g')
    .data(root.leaves())
    .enter()
    .append('g')
    .attr('transform', function(d) {return 'translate('+[d.x0,d.y0]+')'})
    
  
  nodes.append('rect')
  .attr('class','tile')
  .attr('width', function(d) { return d.x1 - d.x0; })
  .attr('height', function(d) { return d.y1 - d.y0; })
  .attr('data-name',function(d){return d.data.name;})
  .attr('data-value',function(d){return d.data.value;})
  .attr('data-category',function(d){return d.data.category;});
  
  //data-category,data-value
  
  nodes.append("text")
    .style('font-size',12)
    .attr('class', 'tile-text')
    .selectAll("tspan")
    .data(function(d) { return d.data.name.split(/\s(?!-)/g); })
    .enter().append("tspan")
    .attr("x", 9)
    .attr("dy", function(d, i) { return 16 })
    .text(function(d) { return d; });
  
  const legend = svg.append('g') // this is the parent g/group, it is the entire legend area
 // .attr('class','legendOrdinal')
  .attr('id','legend')
  .attr("transform", "translate(20,10)");
  
  var legendGroup = legend.data(root.descendants()[0].data.children)
 .enter().append('g').attr('class','legendGroup');
  
  legendGroup.append('text').text(function(d){return d.name});
  //.append('rect').attr('width','30px').attr('height','30px').attr('x',30).attr('y',30);
  legendGroup.append('p').text('this text too');
  legendGroup.append('rect')
    .attr('class','legend-item')
    .attr('width',30)
    .attr('height',30)
    .attr('x',30)
    .attr('y',30)
    .attr('fill','black');
  //console.log(root.descendants()[0].data.children);

 
})

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:

bump! Having the same issue. I’m using Susie Lu’s D3-Legend library, and no dice on adding a class to the rects - super weird.

It seems that Susie Lu’s D3-Legend library adds it’s own class to the rects. Did you ever get it right? I’m doing this challenge now. I’m thinking that a legend needs to be built from scratch.

1 Like