Question

我在单独的角度指令中有2个图表

<chart1 ng-model="data" style="display:block;" id="plot1" class="ng-pristine ng-valid">
<svg width="960" height="500" style="right: 0px;">Some data</svg>
</chart1>
<chart2 ng-model="data" style="display:block;" id="plot1" class="ng-pristine ng-valid">
<svg width="960" height="500" style="right: 0px;">Some data</svg>
</chart2>

图1生成的svg：

           var svg = d3.select("#plot1").append("svg")
               .attr("width", width + margin.left + margin.right)
               .attr("height", height + margin.top + margin.bottom).style({'right': '0'});

图表2：

               var svg = d3.select("#plot2").append("svg")
               .attr("width", width + margin.left + margin.right)
               .attr("height", height + margin.top + margin.bottom).style({'right': '0'});

由于某种原因，这两个图表彼此重叠，在html中，我可以看到svg被设计为position：absolute。如果我删除这种风格一切正常，但我这样做的原因可能是......

我来到这个指南：http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html

但它没有帮助。

我该如何解决这个问题？

Answer 1

我注意到您的两个图表代码都使用相同的ID id="plot1"。

我不是这方面的专家，但我很确定id应该是唯一的。

来自w3school： “ id属性指定HTML元素的唯一ID（该值必须在HTML文档中唯一）。”

Answer 2

您可能还需要在脚本中使用两个不同的变量var svg1和var svg2，因为您知道，异步函数将无法找到正确的svg元素。

<强>故事：

谷歌搜索把我带到这里因为在一个DOM上放置两个SVG有困难。只需检查一下你的情况。

我遇到的问题：

我在同一页面上有两个图表元素; ids，名字不同。
它们都位于页面的不同部分（使用模板引擎[GSP]生成）
这两个块都有类似的脚本。内容是从JSON API加载的。
图表内容重叠

实际问题：

变量名称搞砸了。两个脚本都使用相同的变量var svg=...来引用SVG元素。来自服务器的异步函数中的JSON响应将转到第二个SVG，因为其脚本已重新分配var svg=...

解决方案：

我使用了两个不同的变量：var svg1=...和var svg2=...

d3.js同一页面上的两个图表是彼此重叠的

2 个答案: