Перенос слов D3 на масштабируемой древовидной карте

Я реализую масштабируемую древовидную карту в D3 (http://bost.ocks.org/mike/treemap/), однако я изменил ее, чтобы листовые прямоугольники переходили к URL-адресам при нажатии. Он также добавляет многоточие, если заголовок слишком длинный.

Вместо этого я хотел бы реализовать перенос слов в листовых прямоугольниках, но не могу заставить его работать. Я хотел добавить набор tspan в текст, но слишком много борюсь с порядком выполнения, чтобы понять, куда его поместить.

Код: https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.htm

Данные: https://secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap.json

Я исследовал, что мне нужны либо tspans, разбивающие его, либо div с текстом внутри, но я не знаю, как это сделать. Есть примеры переноса текста для обычной карты дерева D3, но я не нашел ни одного для масштабируемой карты дерева, и код значительно отличается.


d3.js word-wrap treemap
person Jimmy Mack    schedule 16.01.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вероятно, проще всего заменить элементы SVG text на div внутри foreignObject. Для этого вы должны заменить

g.append("text") //was text
 .attr("dy", ".75em")
 ...

с

g.append("foreignObject")
 .attr("dy", ".75em")
 ...
 .append("xhtml:div")
 ...

Также может быть целесообразно установить атрибуты width и height для foreignObject (используя код, аналогичный тому, который вы используете, чтобы определить, является ли текст слишком длинным), чтобы текст отображался правильно.

person Lars Kotthoff    schedule 16.01.2013
comment
Спасибо за ответ. текст, вставленный в div, правильный, но он не отображается на экране (пустые серые квадраты). я экспериментировал с высотой и шириной, но ничего не появляется - person Jimmy Mack; 16.01.2013
comment
Вы пытались явно установить атрибуты шрифта (цвет и т. д.)? Также возможно, что он появляется за прямоугольниками; в этом случае попробуйте установить z-index. - person Lars Kotthoff; 16.01.2013
comment
Да, см. secure.polisci.ohio-state.edu/faq/d3. /zoomabletreemap_1.htm. Не выделяется в инспекторе Chrome - person Jimmy Mack; 16.01.2013
comment
Извините, вам нужно использовать пространство имен xhtml для div и установить атрибуты размера и положения для foreignObject, а не для div. Я обновлю ответ. - person Lars Kotthoff; 16.01.2013
comment
Это проявляется. Похоже, мне нужно выяснить, как заставить их скорректировать размер после перехода, поскольку в настоящее время они сохраняют свои места до перехода. (см. zoomabletreemap_1.htm) - person Jimmy Mack; 16.01.2013
comment
Спасибо за это. Дайте мне знать, если у вас есть мысли о пост-переходе, иначе я могу задать другой вопрос. - person Jimmy Mack; 17.01.2013
comment
Мне кажется, что смещения элементов g неверны - элементы rect расположены правильно. Может быть, сделать .call(rect) на них? - person Lars Kotthoff; 17.01.2013
comment
Пробовал это уже, плюс внешняя функция - это копирование/вставка функции rect. Думал, что они могут не быть частью s2, поэтому я попробовал более глобальные вызовы (например, «d3.selectAll (foreignObject). call (foreign)»), но не повезло. Смещения точно соответствуют тому, что было в коробках до перехода. Таким образом, вызов не работает в «переходе» (либо не вызывается, либо вызывается до выполнения перехода). - person Jimmy Mack; 17.01.2013
comment
Ага! Это была ошибка webkit (stackoverflow .com/questions/11742812/). Выбор D3 не применялся к посторонним предметам из-за того, что они были элементами верблюжьего корпуса. В ФФ работало. Выбор по имени класса заставляет его работать и в Chrome. - person Jimmy Mack; 19.01.2013