Question

使用d3.js脚本，我正在尝试绘制图表。有一个名为“Updatedata（data）”的函数，我传递了参数的JSON字符串。它运作良好。但是，我有一个问题。每次我运行“Updatedata”函数时，都会创建另一个图表（图表），所以最后我看到了很多相同的图表。我想我应该使用新传递的数据来修改代码以刷新图形。

JSON

[
    {
        "name": "first_9999",
        "parent": "null",
        "level": "white"
    },
    {
        "name": "second_9999",
        "parent": "first_9999",
        "level": "white"
    }
]

你能告诉我怎么做吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Tree</title>

    <style>
    .node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 3px;
    }
    .node text { font: 12px sans-serif; }
    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }

    </style>

</head>
<body bgcolor="#212121">

<!-- load the d3.js library --> 
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>



// *********** Convert flat data into a nice tree ***************
// create a name: node map

function updateData(data) {

    //var data = [
    //    { "name" : "Level 2: A", "parent":"Top Level" },
    //    { "name" : "Top Level", "parent":"null" },
    //    { "name" : "Son of A", "parent":"Level 2: A" },
    //    { "name" : "Daughter of A", "parent":"Level 2: A" },
    //    { "name" : "Level 2: B", "parent":"Top Level" }
    //    ];
    //
    //  
    //var data[];

    var dataMap = data.reduce(function (map, node) {
        map[node.name] = node;
        return map;
    }, {});

    // create the tree array
    var treeData = [];
    data.forEach(function (node) {
        // add to parent
        var parent = dataMap[node.parent];
        if (parent) {
            // create child array if it doesn't exist
            (parent.children || (parent.children = []))
            // add node to child array
            .push(node);
        } else {
            // parent is null or missing
            treeData.push(node);
        }
    });



    // ************** Generate the tree diagram  *****************
    var margin = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 80
    },
    width = 400 - margin.right - margin.left,
        height = 400 - margin.top - margin.bottom;



    var i = 0;
    var tree = d3.layout.tree()
        .size([height, width]);
    var diagonal = d3.svg.diagonal()
        .projection(function (d) {
        return [d.y, d.x];
    });
    var svg = d3.select("body").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 + ")");


    //d3.json is meant to load data through HTTP. As @Quentin said, you can set up a local server to serve the data over HTTP.
    //For development like this I use firefox, it seems to be more permissive when it comes to local cross origin requests than chrome.
    //d3.json("treeData.json", function(error, treeData) {
    //  root = treeData[0];
    //  update(root);
    //});


    root = treeData[0];
    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 * 180;
        });
        // 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(" + d.y + "," + d.x + ")";
        });

        nodeEnter.append("circle")
            .attr("r", 10)
        //.style("fill", "#fff");
        .style("fill", function (d) {
            return d.level;
        });


        nodeEnter.append("text")
            .attr("x", function (d) {
            return d.children || d._children ? -13 : 13;
        })
            .attr("dy", ".35em")
            .attr("text-anchor", function (d) {
            return d.children || d._children ? "end" : "start";
        })
            .text(function (d) {
            return d.name;
        })
            .style("fill", "#fff")
            .style("fill-opacity", 1);



        // 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")
            .style("stroke", function (d) {
            return d.target.level;
        })
            .attr("d", diagonal);
    }
}


</script>   
</body>
</html>

如何将JSON数据传递给d3.js并仅获取新图形

0 个答案: