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

问题描述

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

I would like to Extend d3 tree layout to provide hyperlinks and text for each final node

例如，如果您转到

flare> analytics > ckuster > AgglomerativeClustr

我想在文本AgglomerativeCluster下我想有一个文本框，

I would like under the text AgglomerativeCluster I would like to have a textbox with the ability to have custom HTML.

我如何做到这一点？

推荐答案

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

NOTE: by the time I finished this, my good buddy @VividD had already supplied an answer. But because the OP expressed a desire for custom HTML, this may still be relevant.

基本上一个想混合HTML与SVG在一种形式或另一种，一个共同的请求。然而，你可能不会找到一个现成的实现，因为它需要时间，并有相当数量的布局考虑，使其工作（请参阅下面链接的小提琴中x，y属性的设置 - 硬编码为简单）。

Basically one wants to mix HTML with SVG in one form or another, a common request. However, chances are you will not find a ready-made implementation of this since it takes time and has a fair amount of layout considerations to make it work (see the setting of x,y attributes in the fiddle I linked below - hardcoded for simplicity). Having said that, here is my attempt at helping you.

最常见的解决方案是使用。 但请注意，IE不支持。以下是由伟大的迈克，展示了一个非常简单的例子。我自由地扩展它，并创建了一个稍微更复杂的示例的，一个带有textarea的表单。我相信这应该足以产生一些想法，让你去。

The most common solution is the use of an SVG:foreignObject. But be aware that IE does not support it. Here is a gist by the great Mike that showcases a very simple example. I took the liberty to extend it and create a FIDDLE with a slightly more elaborate example, a form with a textarea. I believe this should be enough to generate some ideas and get you going.

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

你可能想考虑生成一个自己的小提琴如果您不能完全解决您的问题。

You might want to consider generating a fiddle of your own (based on this one) if you don't solve your issue completely.

这篇关于扩展d3树布局以在最终节点提供HTML框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！