Добавьте размер к визуализации сосульки - PullRequest
Новая
       14

Добавьте размер к визуализации сосульки

0 голосов
/ 13 марта 2019

Я работаю над этой визуализацией 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 сбивает меня с толку.

1 Ответ

1 голос
/ 14 марта 2019

Если вы хотите добавить элемент <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)

Вот блокс, который вы связали с этим изменением: https://bl.ocks.org/GerardoFurtado/3bc4b6c7260d131ed78a5922700fc633/5ba087da8a55063c58a66314dadafd06585b1329

...