d3.js同一页面上的两个图是在另一个的顶部 [英] d3.js two graphs on same page is on top of each other

问题描述

我有两个单独的角度指令图。

I have 2 graphs each in separate 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：

chart1 generation of 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是styled as position：absolute。如果我删除这个样式一切正常，但它是这样的方式为一个原因大概...

for some reason those two graphs ends on top of each other, in html i can see that svg is stylled as position: absolute. if i remove this style everything works, but it i sstyle this way for a reason probably...

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

但它没有帮助。

我如何解决这个问题？

How can i solve this problem?

推荐答案

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

I notice that both of your chart tags are using the same id id="plot1".

我对这些东西不是一个专家，但我相当确定id应该是唯一的。

I'm not much of an expert on these things, but I'm fairly sure that id's should be unique.

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

这篇关于d3.js同一页面上的两个图是在另一个的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！