我正在尝试放置 2 个 d3.js 树形图,如此处所示 http://bl.ocks.org/1249394 在一页上。两棵树都将加载来自 Javascript 对象的不同数据。第一个将出现在:
<div id="chart"></div>
第二棵树将被加载到:
<div id="chart2"></div>
#chart 和 #chart2 都在同一页面上,第一个树 (#chart) 出现在页面顶部,第二个树 (#chart2) 位于其正下方,这就是图表 div 的排列方式。为此,我应用了 http://bl.ocks.org/1249394 中的相同代码。两次。每个 div 一个,两段代码之间的唯一区别是树的位置,即树 1:#chart 和树 2:#chart2。
树 1:
var vis = d3.select("#chart").append("svg:svg")
树 2:
var vis = d3.select("#chart2").append("svg:svg")
其他一切都保持不变,包括变量和函数名称。 这非常有效,两个图都按其应有的方式显示,除了单击功能(代码中的最后一个功能:)只有第二棵树能够在单击树节点时折叠和展开,第一棵树不再能够这样做这,第一个不再是交互式的。
我该如何解决这个问题?
最佳答案
当您绘制交互所依赖的第二棵树时,您将覆盖 vis
变量。如果要创建多个图表,则需要创建一个闭包,以便每个树都在其自己的范围内。这样他们就不会互相干扰。
Mike 在 http://bost.ocks.org/mike/chart/ 写了一篇关于创建可重用图表的好文章。 。他逐步介绍了如何创建闭合和表面属性。
关于javascript - 树形图: multiple on one page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12554871/