在 Angular 指令中附加 D3 元素答案

【问题标题】：Append D3 Element in Angular Directive在 Angular 指令中附加 D3 元素
【发布时间】：2016-03-28 16:37:58
【问题描述】：

我对 d3.js 很陌生，想将这个代码笔：http://codepen.io/budelman/pen/NqZwpm 我发现为一个角度指令。我面临的一个问题是，在角度指令中，我只能访问一个“元素”。我不知道如何在我的角度代码中附加 div#textbox 图例。

我试过了：

// Shove the text into the div with ID #textbox            
svg.append('div')
.attr('id','textbox')
.select("#textbox")
.text(string);
})

但它不起作用。有人可以指出我正确的方向吗？谢谢！

【问题讨论】：

您使用的是method chaining，这意味着当您调用.select("#textbox") 时，它会在您附加的div 中搜索ID 为textbox 的元素，因为您将其链接到返回 div 的方法。要么完全摆脱选择行，要么将其更改为svg.select("#textbox")...

标签： javascript jquery css angularjs d3.js

【解决方案1】：

这就是原始代码中的内容，

.on("mouseover", function(d) {
            //some code

            // Shove the text into the div with ID #textbox
            d3.select("#textbox")
                .html("")
                .append("text")
                .html(string);
        })

这意味着您只需要一个带有 id 的空 div，然后将 html 插入其中。我不确定您为什么要先添加#textbox，然后再插入html。只需在您的指令中添加。这样你就可以用 d3 独立选择

【讨论】：

我的目标是创建一个角度指令来包装地图和图例（文本框）。最后，html 代码将类似于
没关系。把所有东西都放在指令模板中

【解决方案2】：

我意识到这个问题是多么愚蠢。我所需要的只是通过执行以下操作将新 div 附加到元素：

d3.select(element[0]).append("div").attr("id","textbox");

【讨论】：