从动态 JSON (onStateChange) 更新 d3 图答案

【问题标题】：Update d3 graph from dynamic JSON (onStateChange)从动态 JSON (onStateChange) 更新 d3 图
【发布时间】：2014-05-19 13:23:59
【问题描述】：

我正在使用 Vaadin 框架 (https://vaadin.com/home) 将 d3.js 集成到我的 java 代码中（类似于 http://www.rapidpm.org/2013/10/using-javascript-libraries-d3-in-vaadin.html）。基本上，这段 Javascript 代码绑定到一个 Java 类，并对所述 Java 类中的状态变化作出反应。

================================================ ====================================

所以，当java diagram-class的状态发生变化时，调用this.conStateChange-method：javascript从java类中获取一个新String(var string = this.getState().string;)，解析为JSON 并呈现图形。

单击按钮将通过更改 java 类 (!) 中的 String 来触发状态更改，从而触发所描述的方法并从新的 JSON-parsed-String 呈现新图形。

...理论上...但是，实际上，如果我在图表消失后单击该按钮。只有当我再次单击该按钮时，才会呈现新图形。

/*not so interesting code
var diagramElement = this.getElement();
var width = 960, height = 500;
var force = d3.layout.force().size([ width, height ])
            .charge(-400)
            .linkDistance(40)
            .on("tick", tick);

var drag = force.drag()
            .on("dragstart", dragstart);

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

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

/*interesting code*/
this.onStateChange = function() {

    link.remove(); //delete old graph
    node.remove(); //delete old graph

    var string = this.getState().string;
    graph = JSON.parse(string);

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

    link = link.data(graph.links)
            .enter().append("line")
            .attr("class", "link");
    node = node.data(graph.nodes)
            .enter().append("circle")
            .attr("class", "node")
            .attr("r", 12)
            .on("dblclick", dblclick)
            .call(drag);
};

那么这段代码有什么问题（实际上不是很优雅），我怎样才能实现单击将 [1] 删除显示的图形并 [2] 呈现新图形？

提前谢谢...

【问题讨论】：

浏览器控制台中的任何错误？您可以在 JS 代码中添加一些 console.log 行来查看数据是否一切正常？例如console.log(string); var graph = JSON.parse(string); console.log(graph);
我已在 onStateChange 函数中添加了您的控制台输出。它们的输出总是相同的，加载时，单击按钮一次或两次... console.log(string) ==> " Object { nodes=[13], links=[18]} "

标签： json d3.js vaadin force-layout

【解决方案1】：

我不确定您是否找到了解决方案，而且我仍然是 d3 中的菜鸟，但我想提出建议，因为这个解决方案对我有帮助。但是，我的力布局从 csv 而不是 JSON 派生了它的数据，不确定它是否有很大的不同。

我在“this.onStateChange = function() {”中加入了“graph = {“nodes”：[]，“links”：[] };，因为这将有助于用新数据填充数组。希望对您有所帮助！

【讨论】：