D3 js - Circle辐射图 - 嵌入Angular JS

Question

我需要一个带有d3.js的圆形辐条图。我想在角度js应用程序中添加它。基于Json文件数据，必须绘制图表。我不需要任何动画和缓动效果。请帮忙，找到附图。

我有一个源代码，但我无法删除动画和缓动效果。我只需要静态图。

源代码：

var width = 960,
        height = 600,
        root;

var force = d3.layout.force()
    .linkDistance(200)
    .charge(-200)
    .gravity(0)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("svg").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");

d3.json("graph.json", function(error, json) {
    root = json;
    update();
});

function update() {
    var nodes = flatten(root),
        links = d3.layout.tree().links(nodes);

    // Restart the force layout.
    force
        .nodes(nodes)
        .links(links)
        .start();

    // Update links.
    link = link.data(links, function(d) { return d.target.id; });

    link.exit().remove();

    link.enter().insert("line", ".node")
        .attr("class", "link");

    // Update nodes.
    node = node.data(nodes, function(d) { return d.id; });

    node.exit().remove();

    var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .on("click", click)
        .call(force.drag)
        .attr("href", function(d) { return d.link; });

    nodeEnter.append("svg:a")
      .attr("xlink:href", function(d){return d.link;})
      .append("circle")
          .attr("r", function(d) { return Math.sqrt(d.size) / 10 || 4.5; });

    nodeEnter.append("text")
        .attr("dy", ".35em")
        .text(function(d) { return d.name; });

    node.select("circle")
        .style("fill", color);
}

function tick() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.forEach(function (d) {
        if (d._children || d.children) {
            d.x = width / 2, d.y = height / 2;
            d.fixed = true;
        }
    });

}

function color(d) {
    return d._children ? "#3182bd" // collapsed package
        : d.children ? "#2F9BC1" // expanded package
        : "#fd8d3c"; // leaf node
}

// Toggle children on click.
function click(obj) {
    if (d3.event.defaultPrevented) return; // ignore drag
    if (d.children) {
        d._children = d.children;
        d.children = null;
    } else {
        d.children = d._children;
        d._children = null;
    }
    update();
}

// Returns a list of all nodes under the root.
function flatten(root) {
    var nodes = [], i = 0;

    function recurse(node) {
        if (node.children) node.children.forEach(recurse);
        if (!node.id) node.id = ++i;
        nodes.push(node);
    }

    recurse(root);
    return nodes;
}




Json file Example:

{
    "name": "Parent", "size": 200000, "link": "http://google.com",
    "children": [
     {"name": "Child 01", "size": 150000, "link": "http://google.com"},
     {"name": "Child 02", "size": 150000, "link": "http://yahoo.com"},
     {"name": "Child 03", "size": 150000, "link": "http://youtube.com"},
     {"name": "Child 04", "size": 150000, "link": "http://twitter.com"},
     { "name": "Child 05", "size": 150000, "link": "http://facebook.com" },
     {"name": "Child 06", "size": 150000, "link": "http://facebook.com"}
    ]
}

enter image description here