Question

如何在标签旁边添加每个框的大小？https://observablehq.com/@d3/zoomable-icicle？

我对代码的理解不充分，无法知道在何处附加代码。我假设这是这一行：

cell.append("title")
      .text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);

但是Observable格式让我失望。

Answer 1

如果要添加每个框的值（称为“大小”）的<title>元素，则只需：

selection.append("title")
    .text(d => d.value);

关于Observable中的那一行...

.text(d => `${d.ancestors().map(d => d.data.name).reverse().join("/")}\n${format(d.value)}`);

...您不能使用它，因为ancestors()是D3 v4 / v5的一种方法，并且您链接的bl.ocks使用v3。除此之外，这...

d.ancestors().map(d => d.data.name).reverse().join("/")

...的确获得了所有父母的名字并将其取反（如果您观察一下可观察物，您会发现在值上方有从根到当前框的序列。因此，您没有不需要它，您只需要模板文字的第二行即可：

format(d.value)