扩展 d3 树布局以在最终节点提供 HTML 框答案

【问题标题】：Extending d3 tree layout to provide HTML box at final node扩展 d3 树布局以在最终节点提供 HTML 框
【发布时间】：2014-05-06 10:33:43
【问题描述】：

我想扩展 d3 树布局，为每个最终节点提供超链接和文本

http://mbostock.github.io/d3/talk/20111018/tree.html

例如如果你去

flare> analytics > ckuster > AgglomerativeClustr

我希望在 AgglomerativeCluster 文本下有一个能够自定义 HTML 的文本框。

我该怎么做？

【问题讨论】：

标签： javascript svg d3.js treeview mindmapping

【解决方案1】：

有几种方法可以实现你想要的，但我相信下面的解决方案既简单又高效。

我将从一个与您的类似的示例开始，也没有任何超链接：

link to jsfiddle - starting point,

并将引导您完成所有必要但简单的修改。

首先，让我们为我们希望将标签作为超链接的节点添加字段“url”：

        {
            "children": [{
            "name": "AgglomerativeCluster",
            "size": 3938,
            "url": "http://www.example.com/"    
        }, {
            "name": "CommunityStructure",
            "size": 3812,
            "url": "http://www.example.com/"    

        }, {
            "name": "HierarchicalCluster",
            "size": 6714,
            "url": "http://www.example.com/"    

        }, {
            "name": "MergeEdge",
            "size": 743,
            "url": "http://www.example.com/"    
        }

现在，让我们编写代码来选择节点数据包含字段“url”中任何内容的所有标签，并为每个此类标签添加适当的时钟处理程序，以打开对应的 url：（它还为鼠标悬停设置不同的光标指针，以便用户知道标签实际上是一个超链接）

d3.selectAll(".node text")
    .filter(function(d){ return d.url; })
    .style("cursor", "pointer")
    .on("click", function(d){
        document.location.href = d.url;
    });

就是这样！

link to jsfiddle - finished example

【讨论】：

【解决方案2】：

注意：当我完成这个时，我的好伙伴@VividD 已经提供了答案。但是因为 OP 表达了对自定义 HTML 的渴望，这可能仍然是相关的。

基本上，人们希望以一种或另一种形式将 HTML 与 SVG 混合，这是一种常见的要求。但是，您可能找不到现成的实现，因为它需要时间并且需要考虑大量布局因素才能使其工作（请参阅下面链接的小提琴中的 x,y 属性的设置 - 为简单起见硬编码）。话虽如此，这是我帮助你的尝试。

最常见的解决方案是使用SVG:foreignObject。 但请注意，IE 不支持它。 这是伟大的 Mike 的 gist，它展示了一个非常简单的示例。我冒昧地对其进行了扩展并创建了一个FIDDLE，并带有一个稍微复杂的示例，一个带有文本区域的表单。我相信这应该足以产生一些想法并让你继续前进。

svg.append("foreignObject")
    .attr("x", 40)
    .attr("y", 40)
    .attr("width", 480)
    .attr("height", 240)
  .append("xhtml:body")
    ...

如果您没有完全解决您的问题，您可能需要考虑生成自己的小提琴（基于这个）。

【讨论】：