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

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: 

  const url = '';
  const svg ='body').append('svg')

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)");
 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();
  root.sum(function(d){return d.value});
  var nodes ='svg').selectAll('g')
    .attr('transform', function(d) {return 'translate('+[d.x0,d.y0]+')'})
  .attr('width', function(d) { return d.x1 - d.x0; })
  .attr('height', function(d) { return d.y1 - d.y0; })
    .attr('class', 'tile-text')
    .data(function(d) { return\s(?!-)/g); })
    .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("transform", "translate(20,10)");
  var legendGroup =[0].data.children)
  legendGroup.append('p').text('this text too');


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.