#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
Комментарии:
1. Большое вам спасибо за подробный ответ. Возможно ли указать размер рядом с именем, а не в качестве всплывающей подсказки?
2. Да, это возможно.