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: