Javascript D3Js图形不适用于角度JS

我想在我的angular web应用程序中使用d3.js实现一个图形。最初，我使用的代码来自此。我将脚本标记和粘贴之间的所有副本复制到我的控制器文件中，将css代码复制到我的css文件中，并将html从站点复制到我的html文件中。如果这令人困惑，我将在下面展示一个示例。当我使用这个网站的代码时，一切都很好。 然而，我尝试实现一个与此不同的d3.js图，并遵循与以前相同的方法，这次，它不起作用

我试着把我的代码粘贴到这里，但看起来不整洁。因此，这里是

BuildVerticaLTree（treeData，#tree”）

此外，如果在html页面中的脚本标记下实现，则js代码可以正常工作。例如：

<script>
$(document).ready(function () {
        //build tree
        function BuildVerticaLTree(treeData, treeContainerDom) {
            var margin = { top: 40, right: 120, bottom: 20, left: 120 };
            var width = 960 - margin.right - margin.left;
            var height = 500 - margin.top - margin.bottom;

            var i = 0, duration = 750;
            var tree = d3.layout.tree()
                .size([height, width]);
            var diagonal = d3.svg.diagonal()
                .projection(function (d) { return [d.x, d.y]; });
            var svg = d3.select(treeContainerDom).append("svg")
                .attr("width", width + margin.right + margin.left)
                .attr("height", height + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            root = treeData;

            update(root);
            function update(source) {
                // Compute the new tree layout.
                var nodes = tree.nodes(root).reverse(),
                    links = tree.links(nodes);
                // Normalize for fixed-depth.
                nodes.forEach(function (d) { d.y = d.depth * 100; });
                // Declare the nodes…
                var node = svg.selectAll("g.node")
                    .data(nodes, function (d) { return d.id || (d.id = ++i); });
                // Enter the nodes.
                var nodeEnter = node.enter().append("g")
                    .attr("class", "node")
                    .attr("transform", function (d) {
                        return "translate(" + source.x0 + "," + source.y0 + ")";
                    }).on("click", nodeclick);
                nodeEnter.append("circle")
                 .attr("r", 10)
                    .attr("stroke", function (d) { return d.children || d._children ? "steelblue" : "#00c13f"; })
                    .style("fill", function (d) { return d.children || d._children ? "lightsteelblue" : "#fff"; });
                //.attr("r", 10)
                //.style("fill", "#fff");
                nodeEnter.append("text")
                    .attr("y", function (d) {
                        return d.children || d._children ? -18 : 18;
                    })
                    .attr("dy", ".35em")
                    .attr("text-anchor", "middle")
                    .text(function (d) { return d.name; })
                    .style("fill-opacity", 1e-6);
                // Transition nodes to their new position.
                //horizontal tree
                var nodeUpdate = node.transition()
                    .duration(duration)
                    .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
                nodeUpdate.select("circle")
                    .attr("r", 10)
                    .style("fill", function (d) { return d._children ? "lightsteelblue" : "#fff"; });
                nodeUpdate.select("text")
                    .style("fill-opacity", 1);


                // Transition exiting nodes to the parent's new position.
                var nodeExit = node.exit().transition()
                    .duration(duration)
                    .attr("transform", function (d) { return "translate(" + source.x + "," + source.y + ")"; })
                    .remove();
                nodeExit.select("circle")
                    .attr("r", 1e-6);
                nodeExit.select("text")
                    .style("fill-opacity", 1e-6);
                // Update the links…
                // Declare the links…
                var link = svg.selectAll("path.link")
                    .data(links, function (d) { return d.target.id; });
                // Enter the links.
                link.enter().insert("path", "g")
                    .attr("class", "link")

                    .attr("d", function (d) {
                        var o = { x: source.x0, y: source.y0 };
                        return diagonal({ source: o, target: o });
                    });
                // Transition links to their new position.
                link.transition()
                    .duration(duration)
                .attr("d", diagonal);


                // Transition exiting nodes to the parent's new position.
                link.exit().transition()
                    .duration(duration)
                    .attr("d", function (d) {
                        var o = { x: source.x, y: source.y };
                        return diagonal({ source: o, target: o });
                    })
                    .remove();

                // Stash the old positions for transition.
                nodes.forEach(function (d) {
                    d.x0 = d.x;
                    d.y0 = d.y;
                });
            }

            // Toggle children on click.
            function nodeclick(d) {
                if (d.children) {
                    d._children = d.children;
                    d.children = null;
                } else {
                    d.children = d._children;
                    d._children = null;
                }
                update(d);
            }
        }

        var treeData =
    {
        "name": "BU Head",
        "children": [
          {
              "name": "Manager",
              "children": [
                {
                    "name": "Team Lead",
                     "children": []
                },
                {
                    "name": "Team Lead",
                    "children": []
                }
              ]
          },
          {
              "name": "Manager",
              "children": []
          }
        ]
    };
        BuildVerticaLTree(treeData, "#tree");
    });
</script>
<div class="container">
    <div id = "tree"></div>  
</div>


$（文档）.ready（函数（）{
//建树
函数构建垂直树（treeData、treeContainerDom）{
var-margin={顶部：40，右侧：120，底部：20，左侧：120}；
变量宽度=960-margin.right-margin.left；
变量高度=500-margin.top-margin.bottom；
变量i=0，持续时间=750；
var tree=d3.layout.tree（）
.尺寸（[高度、宽度]）；
var diagonal=d3.svg.diagonal（）
.投影（函数（d）{返回[d.x，d.y]；}）；
var svg=d3.select（treeContainerDom）.append（“svg”）
.attr（“宽度”，宽度+边距。右侧+边距。左侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
根=treeData；
更新（根）；
函数更新（源）{
//计算新的树布局。
var nodes=tree.nodes（root）.reverse（），
链接=树。链接（节点）；
//为固定深度进行规格化。
forEach（函数（d）{d.y=d.depth*100；}）；
//声明节点…
var node=svg.selectAll（“g.node”）
.data（节点，函数（d）{返回d.id | |（d.id=++i）}）；
//输入节点。
var nodeEnter=node.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“转换”，函数（d）{
返回“translate”（“+source.x0+”，“+source.y0+”）；
})。打开（“单击”，节点单击）；
nodeEnter.append（“圆”）
.attr（“r”，10）
.attr（“stroke”，函数（d）{return d.children | | | d.| u children？“steelblue”：“#00c13f”}）
.style（“fill”，函数（d）{return d.children | | d.| u children？“lightsteelblue”：“#fff”}）；
//.attr（“r”，10）
//.样式（“填充”、“fff”）；
nodeEnter.append（“文本”）
.attr（“y”，函数（d）{
返回d.children | | d.| U儿童？-18:18；
})
.attr（“dy”，“.35em”）
.attr（“文本锚定”、“中间”）
.text（函数（d）{返回d.name；}）
.样式（“填充不透明度”，1e-6）；
//将节点转换到其新位置。
//水平树
var nodeUpdate=node.transition（）
.持续时间（持续时间）
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
节点更新。选择（“圆圈”）
.attr（“r”，10）
.style（“fill”，函数（d）{return d._children？“lightsteelblue”：“fff”}）；
nodeUpdate.select（“文本”）
.样式（“填充不透明度”，1）；
//将退出节点转换到父节点的新位置。
var nodeExit=node.exit（）.transition（）
.持续时间（持续时间）
.attr（“transform”，函数（d）{return“translate”（“+source.x+”，“+source.y+”）”）；}）
.remove（）；
nodeExit.select（“圆”）
.attr（“r”，1e-6）；
nodeExit.select（“文本”）
.样式（“填充不透明度”，1e-6）；
//更新链接…
//声明链接…
var link=svg.selectAll（“path.link”）
.data（链接，函数（d）{返回d.target.id；}）；
//输入链接。
link.enter（）插入（“路径”，“g”）
.attr（“类”、“链接”）
.attr（“d”，函数（d）{
var o={x:source.x0，y:source.y0}；
返回对角线（{source:o，target:o}）；
});
//过渡链接到他们的新位置。
link.transition（）
.持续时间（持续时间）
.attr（“d”，对角线）；
//将退出节点转换到父节点的新位置。
link.exit（）.transition（）
.持续时间（持续时间）
.attr（“d”，函数（d）{
var o={x:source.x，y:source.y}；
返回对角线（{source:o，target:o}）；
})
.remove（）；
//将旧位置隐藏起来，以便过渡。
nodes.forEach（函数（d）{
d、 x0=d.x；
d、 y0=d.y；
});
}
//在单击时切换子项。
功能节点单击（d）{
如果（d.儿童）{
d、 _children=d.children；
d、 children=null；
}否则{
d、 儿童=d.\U儿童；
d、 _children=null；
}
更新（d）；
}
}
变量