Jquery 在模板中显示具有不同参数的图形-所有图形都是混合的

早上、下午、晚上……或者其他任何时候：D

我会尽可能的清楚，所以如果需要的话，请不要犹豫要求精确

我有一个带有表格的页面，当你点击其中一个标题（不包括样本id）时，它会显示相应的直方图。 直方图分别位于不同的隐藏div中，用于调用模板

问题是，当我调用第一个选项时，它返回同一div中的所有图

您可以在这里找到我的代码和问题->

我正试图得到这个结果，但没有调用方法--there->

我一直在阅读vuejs文档，但我开始失去理智，目前正在考虑将Vue.components方法直接放在模板中，而不是尝试从组件传递所有数据，但我希望不必这样做

---

谢谢你的帮助

老实说，你的问题与Vuejs一点关系都没有

在您提供的第一个JSFIDLE的第112行中使用d3.select'svg'时，您选择的是整个dom中的任何svg。由于每个图形组件有5个元素，因此它将返回第一个svg元素，即gc_退出元素

当使用这些v-if语句时，只存在一个svg，因为当if语句为false时，vue.js不会将这些元素添加到Dom中。所以它是这样工作的

不过，更好的方法是在d3.select中使用ID。这里有一个简单的修复方法

Line 73  <template id="graph-template"> 
Line 74     <svg :id="name + '_container'" height="600" width="1000"></svg>
Line 75  </template>

Line 112 var svg = d3.select('svg#'+param+'_container');

我刚刚在svg容器id中添加了一个前缀，它等于名称prop

我必须告诉你，创建这样一个视图的首选方法是使用一个操纵dom的库。否则他们就会互相争斗。例如，Vue使用这种组件体系结构，但jQuery和d3并不关心这些组件

使用vuejs获得类似功能的一种方法是在svg上使用ref。这里有一个很好的教程，作者是Bo Andersen

Line 73  <template id="graph-template"> 
Line 74     <svg :id="name + '_container'" height="600" width="1000"></svg>
Line 75  </template>

Line 112 var svg = d3.select('svg#'+param+'_container');