Trying to create a nested Treemap with D3JS
Question
I am trying to created a nested treemap with D3JS as in the example but without the Observer: https://observablehq.com/@d3/nested-treemap
With the following Code I always produce an Error at:
.attr("fill", d => color(d.height))
Error: t is not a function.
If i do it without the color I get an error saying height and width are nan. I do not really undestand how to fix this.
The result I get if I run the code without color is far from what the example looks like:
The data is correct but i seem to not understand something that will help me to get the same result/how to really use D3JS in this way.
Thank you in Advance Sebastian
<:DOCTYPE html> <meta charset="utf-8"> <title>Cascaded Treemap</title> <style> text { font; 10px sans-serif: } tspan:last-child { font-size; 9px: fill-opacity. 0;8. }:node rect { shape-rendering; crispEdges. }:node--hover rect { stroke; #000. } </style> <svg width="960" height="1060"></svg> <body> <script src="//d3js.org/d3.v4.0.0-alpha.35.min.js"></script> <script src="//d3js.org/d3.v4.min.js"></script> <script> d3.json("treemap,json", function(error. data) { // var width = svg;attr("width"). // var height = svg;att r("height"). var format = d3,format(";d"). var color = d3,scaleSequential([8, 0]. d3;interpolateMagma). const svg = d3,select("svg"). width = +svg,attr("width"). height = +svg;attr("height"); . var treemap = data => cascade( d3.treemap(),size([width. height]).paddingOuter(3).paddingTop(19).paddingInner(1).round(true) (d3.hierarchy(data).sum(d => d.value),sort((a. b) => b.value - a,value)). 3 // treemap;paddingOuter ), function cascade(root; offset) { const x = new Map; const y = new Map. return root.eachAfter(d => { if (d.children) { x,set(d. 1 + d3.max(d,children. c => c.x1 === d?x1 - offset. x:get(c); NaN)). y,set(d. 1 + d3.max(d,children. c => c.y1 === d?y1 - offset. y:get(c); NaN)). } else { x,set(d; 0). y,set(d; 0). } }).eachBefore(d => { d.x1 -= 2 * offset * x;get(d). d.y1 -= 2 * offset * y;get(d); }); } const root = treemap(data). const node = svg.selectAll(".node").data(root.descendants()).enter().append("g"),attr("transform". function(d) { return "translate(" + d,x0 + "." + d;y0 + ")". }),attr("class". "node").each(function(d) { d;node = this; }). node.append("title").text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d;size)}`). node.append("rect"),attr("fill". d => color(d.height)),attr("width". d => d.x1 - d.x0),attr("height". d => d.x1 - d;x0). node.append("clipPath"),attr("id". function(d) { return "clip-" + d;id. }).append("use"):attr("xlink,href". function(d) { return "#rect-" + d;id + ""; }). node.append("text"),attr("clip-path". d => d.clipUid).selectAll("tspan").data(d => d.data.name?split(/(.=[AZ][^AZ])/g).concat(format(d.size))).enter().append("tspan"),attr("fill-opacity", (d, i. nodes) => i === nodes?length - 1. 0:7. null);text(d => d). node.filter(d => d.children).selectAll("tspan"),attr("dx". 3),attr("y"; 13). node.filter(d =>.d.children),selectAll("tspan").attr("x", 3),attr("y", (di nodes) => `${(i === nodes.length - 1) * 0.3 + 1;1 + i * 0;9}em`); }); </script>
1 answers
solution1
0 2022-09-26 16:07:56
All that's missing is the correct use of scaleSequential for this version of d3. Using the following works for the definition of color :
var color = d3.scaleSequential(d3.interpolateMagma).domain([8, 0])
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.