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

#javascript #d3.js #data-visualization

#javascript #d3.js #визуализация данных

Вопрос:

Я работаю над этой визуализацией 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)}`);

Но наблюдаемый формат сбивает меня с толку.

1. Вы имеете в виду число рядом с именем в каждом поле? Если это так, то код для этого — .text(d => ${format(d.value)} );

2. Извините, я не могу правильно отформатировать приведенный выше код из-за того, что сам код содержит ` character

Ответ №1:

Если вы хотите добавить <title> элемент со значением (которое вы назвали «size») каждого поля, все, что вам нужно, это:

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

Что касается этой строки в наблюдаемом…

 .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)

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