从动态JSON更新d3图（onStateChange）

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

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

所以，当java图表的状态 - 调用this.conStateChange方法：javascript从java类（var string = this.getState（）。string;）中提取一个新的String，将其解析为JSON并呈现图形。

按钮单击将通过更改Java类（！）中的字符串触发状态更改，从而触发所描述的方法并从新的JSON解析的字符串中呈现新图形。

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

/*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]渲染新图？

在此先感谢...

来源

2014-05-19 SuperUser01

浏览器控制台中的任何错误？你可以在你的JS代码中添加一些console.log行来查看数据是否一切正常？例如''的console.log（字符串）; var graph = JSON.parse（string）; console.log（graph）;'' – cfrick

我已经在onStateChange函数中添加了您的控制台输出。它们的输出始终是相同的，当加载时，单击按钮一次或两次... console.log（string）==>“Object {nodes = [13]，links = [18]}” – SuperUser01

我不知道你是否已经找到了解决方案，我仍然在D3一个小白，但我想建议作为该解决方案帮助了我。但是，我的强制布局从csv获取数据，而不是JSON，不确定它是否有很大的不同。我在“this.onStateChange = function（）{”中包含了“graph = {”nodes“：[]，”links“：[]};”，这将有助于用新数据填充数组。希望能帮助到你！

来源

2016-01-27 05:11:32

从动态JSON更新d3图（onStateChange）

回答

相关问题