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

【问题标题】：d3.js two graphs on same page is on top of each otherd3.js 同一页面上的两个图表彼此重叠
【发布时间】：2014-02-05 15:24:20
【问题描述】：

我在单独的角度指令中有 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>

chart1 生成 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。如果我删除这种样式，一切正常，但我以这种方式设置样式可能是有原因的......

我遇到了这个 guid：http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html

但它没有帮助。

我该如何解决这个问题？

【问题讨论】：

如果您需要position: absolute，那么您需要明确设置定位，例如left: 0px 用于第一张图，right: 0px 用于第二张。
但实际上，除非您有使用绝对定位的特殊原因，否则没有必要。它不会改变图表内部内容的绘制方式。

标签： javascript css d3.js

【解决方案1】：

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

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

来自w3school： "id 属性为 HTML 元素指定一个唯一的 id（该值在 HTML 文档中必须是唯一的）。"

【讨论】：

【解决方案2】：

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

故事：

Google 搜索将我带到这里，因为我无法在一个 DOM 上放置两个 SVG。请检查是否是您的情况。

我遇到的问题：

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

实际问题：

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

解决办法：

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

【讨论】：