javascript - d3.js 同一页面上的两个图相互重叠

Question

我有 2 个图表，每个图表都在单独的 Angular Directive(指令)中

<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

但这并没有帮助。

我该如何解决这个问题？

Answer 1

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

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

来自 w3school : “id 属性为 HTML 元素指定了唯一的 ID(该值在 HTML 文档中必须是唯一的)。”