javascript - 为冰柱可视化添加尺寸

Question

我正在这里处理这个 D3 可视化: https://bl.ocks.org/mbostock/4347473

如何添加标签旁边每个框的大小，如下所示: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("/")

...所做的是获取所有 parent 的名字并反转它(如果你查看可观察的值，你会看到在你有序列的值之上，从根到当前框。因此，你不'不需要它，您所需要的只是模板文字中的第二行:

format(d.value)

这是您与该更改链接的 bl.ocks:https://bl.ocks.org/GerardoFurtado/3bc4b6c7260d131ed78a5922700fc633/5ba087da8a55063c58a66314dadafd06585b1329