javascript - exit() 上的 D3 转换

Question

我有一个树形图，用户可以通过单击各个框来深入了解 - 除了过渡之外，一切都正常。它似乎只适用于树形图的最后一层，否则没有过渡。

示例如下。

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

好的，我想我已经完成了转换。确保在调用新属性之前调用转换会产生很大的不同。此外，在更新 rect 对象之前更新 g 对象时，更新模式需要一些帮助。

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>