Question

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

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

因此，当java图表类的状态发生变化时，调用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]呈现新图形？

提前致谢...

Answer 1

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

我包括＆＃34; graph = {＆＃34; nodes＆＃34;：[]，＆＃34; links＆＃34;：[]}; ＆＃34;在＆＃34; this.onStateChange = function（）{＆＃34;因为这将有助于用新数据填充数组。希望它有所帮助！

从动态JSON（onStateChange）更新d3图

1 个答案: