D3在exit（）上的过渡

Question

I have a treemap where users can drill in by clicking on the various boxes - everything is working but the transitions. It seems to only work on the last level of the treemap, otherwise there is no transition.

Example below.

 const data = { "name": "A1", "health": 0.521, "children": [ { "name": "B1", "health": 0.521, "children": [ { "name": "B1-C1", "health": 0.614, "children": [ { "name": "B1-C1-D1", "health": 0.666, "children": [ { "name": "B1-C1-D1-E1", "value": 30, "health": 0.8 }, { "name": "B1-C1-D1-E2", "value": 35, "health": 0.5 }, { "name": "B1-C1-D1-E3", "value": 20, "health": 0.7 } ] }, { "name": "B1-C1-D2", "health": 0.45, "children": [ { "name": "B1-C1-D2-E1", "value": 10, "health": 0.8 }, { "name": "B1-C1-D2-E1", "value": 14, "health": 0.1 } ] }, { "name": "B1-C1-D3", "health": 0.64, "children": [ { "name": "B1-C1-D3-E1", "value": 10, "health": 0.8 }, { "name": "B1-C1-D3-E2", "value": 14, "health": 0.2 }, { "name": "B1-C1-D3-E3", "value": 7, "health": 0.7 }, { "name": "B1-C1-D3-E4", "value": 9, "health": 0.9 }, { "name": "B1-C1-D3-E5", "value": 5, "health": 0.6 } ] }, {"name": "B1-C1-D4", "value": 2, "health": 0.7 } ] }, { "name": "B1-C2", "health": 0.45, "children": [ {"name": "B1-C2-D1", "health": 0.45, "value": 12} ] }, { "name": "B1-C3", "health": 0.5, "children": [ {"name": "B1-C3-D1", "health": 0.5, "value": 10} ] } ] } ] } const treemapLayout = d3.treemap() .size([500, 300]) .paddingOuter(16); let t = d3.transition().duration(1500) // update the view let update = (d) => { console.log(d) let rootNode = d3.hierarchy(d) rootNode .sum(function(d) { return d.value; }) .sort(function(a, b) { return b.height - a.height || b.value - a.value; }); //console.log(rootNode) treemapLayout(rootNode); let nodes = d3.select('svg') .selectAll('g') .data(rootNode.descendants(), d => d ? d.name : 'root') nodes .exit() .attr("fill-opacity", 1) .transition(t) .attr("fill-opacity", 0) .remove() nodes = nodes .enter() .append('g') .merge(nodes) .filter(function(d) { return d.depth < 4; }) .attr('transform', function(d) { return 'translate(' + [d.x0, d.y0] + ')' }) nodes .append('rect') .attr('width', function(d) { return d.x1 - d.x0; }) .attr('height', function(d) { return d.y1 - d.y0; }) .attr('style', function(d) { return ('fill:' + d3.interpolateRdYlGn(d.data.health)) }) .on('click', function(d) { update(d.data); }) .transition(t) nodes .append('text') .attr('dx', 4) .attr('dy', 14) .text(function(d) { return d.data.name; }) }; update(data); 

 rect { fill: cadetblue; opacity: 1; stroke: white; } text { font-family: "Helvetica Neue", Helvetica, sans-serif; fill: #484848; font-size: 10px; overflow-x: hidden; overflow-y: hidden; } 

 <script src="https://d3js.org/d3.v5.min.js"></script> <svg width="1000" height="800"> <g></g> </svg> 

Answer 1

Ok, I think I got the transitions working. Making sure your have the transition called before you call the new attributes makes a big difference. Also, the update pattern needed a little help as you update the g object before you update the rect objects.

 const data = { "name": "A1", "health": 0.521, "children": [ { "name": "B1", "health": 0.521, "children": [ { "name": "B1-C1", "health": 0.614, "children": [ { "name": "B1-C1-D1", "health": 0.666, "children": [ { "name": "B1-C1-D1-E1", "value": 30, "health": 0.8 }, { "name": "B1-C1-D1-E2", "value": 35, "health": 0.5 }, { "name": "B1-C1-D1-E3", "value": 20, "health": 0.7 } ] }, { "name": "B1-C1-D2", "health": 0.45, "children": [ { "name": "B1-C1-D2-E1", "value": 10, "health": 0.8 }, { "name": "B1-C1-D2-E1", "value": 14, "health": 0.1 } ] }, { "name": "B1-C1-D3", "health": 0.64, "children": [ { "name": "B1-C1-D3-E1", "value": 10, "health": 0.8 }, { "name": "B1-C1-D3-E2", "value": 14, "health": 0.2 }, { "name": "B1-C1-D3-E3", "value": 7, "health": 0.7 }, { "name": "B1-C1-D3-E4", "value": 9, "health": 0.9 }, { "name": "B1-C1-D3-E5", "value": 5, "health": 0.6 } ] }, {"name": "B1-C1-D4", "value": 2, "health": 0.7 } ] }, { "name": "B1-C2", "health": 0.45, "children": [ {"name": "B1-C2-D1", "health": 0.45, "value": 12} ] }, { "name": "B1-C3", "health": 0.5, "children": [ {"name": "B1-C3-D1", "health": 0.5, "value": 10} ] } ] } ] } const treemapLayout = d3.treemap() .size([500, 300]) .paddingOuter(16); let t = d3.transition().duration(1500) // update the view let update = (d) => { console.log(d) let rootNode = d3.hierarchy(d) rootNode .sum(function(d) { return d.value; }) .sort(function(a, b) { return b.height - a.height || b.value - a.value; }); //console.log(rootNode) treemapLayout(rootNode); let nodes = d3.select('svg') .select('g') .selectAll('.root') .data(rootNode.descendants(), d => d ? d.data.name : 'root') nodes .exit() .attr("fill-opacity", 1) .transition(t) .attr("fill-opacity", 0) .remove() nodes = nodes .enter() .append('g') .attr('class', 'root') .filter(function(d) { return d.depth < 4; }) ; const cells = nodes .append('rect') .attr('width', function(d) { return d.x1 - d.x0; }) .attr('height', function(d) { return d.y1 - d.y0; }) .attr('style', function(d) { return ('fill:' + d3.interpolateRdYlGn(d.data.health)) }) .on('click', function(d) { update(d.data); }) nodes.merge(nodes).transition(t) .attr('transform', function(d) { return 'translate(' + [d.x0, d.y0] + ')' }) .select('rect') .attr('width', function(d) { return d.x1 - d.x0; }) .attr('height', function(d) { return d.y1 - d.y0; }) .attr('style', function(d) { return ('fill:' + d3.interpolateRdYlGn(d.data.health)) }) nodes .append('text') .attr('dx', 4) .attr('dy', 14) .text(function(d) { return d.data.name; }) }; update(data); 

 rect { fill: cadetblue; opacity: 1; stroke: white; } text { font-family: "Helvetica Neue", Helvetica, sans-serif; fill: #484848; font-size: 10px; overflow-x: hidden; overflow-y: hidden; } 

 <script src="https://d3js.org/d3.v5.min.js"></script> <svg width="1000" height="800"> <g></g> </svg>