d3.js同一頁上的兩個圖是對彼此

頂部我有2個曲線圖的每個在不同的角度指令d3.js同一頁上的兩個圖是對彼此

<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。如果我刪除這種風格一切正常，但我sstyle這種方式可能是一個原因...

我來進行的跨此GUID：http://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html

但它沒有幫助。

我該如何解決這個問題？

來源

2014-02-05 Timsen

如果您需要'位置：絕對'那麼你需要明確地設置定位，例如第一張圖爲「left：0px」，第二張爲「right：0px」。 –

但是真的，除非*你*有使用絕對定位的特殊原因，否則沒有必要。它不會改變圖形內部內容的繪製方式。 – AmeliaBR

我注意到，您的兩個圖表標記都使用相同的編號id="plot1"。

我對這些事情並不是很熟悉，但我確信id應該是唯一的。

從w3school：「id屬性指定一個唯一的ID爲HTML元素（值必須是在HTML文檔中是唯一的）。」

來源

2014-02-12 12:03:13 d3noob

您可能還需要使用兩個不同的變量var svg1和var svg2，因爲你知道，異步函數將很難找到正確的svg元素。

故事：

谷歌搜索帶我這裏有麻煩放置兩個SVGs上的單個DOM。只要檢查這是你的情況。

問題我面臨：

我有兩個圖表元素在同一頁上; ID，名稱不同。
他們都在不同的頁面部分（使用模板引擎[GSP]生成）
這兩個塊都有一個類似的腳本。內容是從JSON API加載的。
圖表的內容物重疊

的實際問題：

變量名都搞砸了。兩個腳本都使用相同的變量var svg=...來引用SVG元素。從服務器異步功能JSON響應打算第二SVG，因爲它的劇本重新分配var svg=...

解決辦法：

我用了兩個不同的變量：var svg1=...和var svg2=...

來源

2015-12-13 08:02:11

d3.js同一頁上的兩個圖是對彼此

回答

相關問題