【问题标题】:D3 Word Wrap on Zoomable Treemap可缩放树形图上的 D3 自动换行
【发布时间】:2013-01-16 15:49:44
【问题描述】:

我在 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

我研究过我要么需要 tspan 将其分解,要么需要一个包含文本的 div,但我也不知道该怎么做。有常规 D3 Treemap 的文本换行示例,但我没有发现 Zoomable Treemap 的示例,并且代码明显不同。

【问题讨论】:

    标签: d3.js word-wrap treemap


    【解决方案1】:

    最简单的做法可能是将 SVG text 元素替换为 divs 内的 foreignObject。为此,您将替换

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

    与

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

    还建议设置foreignObject 的width 和height 属性(使用类似于您用来确定文本是否太长的代码)以使文本正确流动。

    【讨论】:

    • 感谢您的回复。插入到 div 中的文本是正确的,但它没有显示在屏幕上(空白灰色方块)。我尝试了一些高度和宽度,但没有显示出来
    • 您是否尝试过明确设置字体属性(颜色等)?它也有可能出现在矩形后面;在这种情况下,请尝试设置 z-index。
    • 是的,请参阅secure.polisci.ohio-state.edu/faq/d3/zoomabletreemap_1.htm。不会在 Chrome 检查器中突出显示
    • 对不起,div 需要使用命名空间xhtml,并在foreignObject 上设置大小和位置属性,而不是div。我会更新答案。
    • 啊哈!就是这个 webkit 错误 (stackoverflow.com/questions/11742812/…)。 D3 选择未应用于外来对象,因为它们是驼峰式元素。它在FF中工作。按类名选择也可以在 Chrome 中工作
    猜你喜欢
    • 2023-03-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-18
    • 1970-01-01
    相关资源
    最近更新 更多