Question

如何在单击按钮时重绘D3.js图？我从http://127.0.0.1:5000/json的Python Flask服务器获取数据作为json。这是我的糟糕尝试：

var height = 1000;
var width = 1000;
var color = d3.scale.category10();
var force = d3.layout.force()
    .linkDistance(120)
    //.linkStrength(30)
    .size([width, height]);

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

var url = "http://127.0.0.1:5000/json";
function drawGraph(data){

    force
        .nodes(data.graph.nodes)
        .start();

    var node = svg.selectAll(".node")
        .data(data.graph.nodes)
        .enter().append("circle")
        .attr("class", "node")
        .attr("r", 5)
        .style("fill", function (d) {
            return color(d.group);
        })
        .call(force.drag);

    force.on("tick", function () {
        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("cx", function (d) {return d.x;})
            .attr("cy", function (d) {return d.y;});
    });
}

// This initial load works 
d3.json(url, drawGraph);

// The refresh does not
function refreshGraph() {
    d3.json(url, drawGraph);
}

html：

<!DOCTYPE html>
<html>
  <head>
    <title>Force-Directed Layout</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <link type="text/css" rel="stylesheet" href="force.css"/>
  </head>
  <body>
    <div id="option">
    <input name="updateButton"
           type="button"
           value="Update"
           onclick="refreshGraph()" />
    </div>
    <div id="chart"></div>
    <script type="text/javascript" src="force.js"></script>
  </body>
</html>

Answer 1

可能是由于您将var node分配给选择的.enter()部分而引起的。因此，当您更新图形时，此部分为空，因此在force.on("tick", ...)期间您什么也不更新。

我建议重写

var node = svg.selectAll(".node")
    .data(data.graph.nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", 5)
    .style("fill", function (d) {
        return color(d.group);
    })
    .call(force.drag);

到

var node = svg.selectAll(".node")
    .data(data.graph.nodes)

node.enter().append("circle")
    .attr("class", "node")
    .attr("r", 5)
    .style("fill", function (d) {
        return color(d.group);
    })
    // .call(force.drag);

单击按钮

1 个答案: