D3圖表角度指令信息框對齊

Question

最近，我在實習期間被分配了一項任務，以使用AngularJS幫助將樣式從舊項目轉換為更新的Verison。

我在舊版本中有此圖：

兩種版本均在D3中制作圖形，但在新版本中，圖形采用自定義的角度指令。

我需要做的是將價格和名稱對准如圖所示的條形右側。

在舊代碼中，這只是一個大的JS文件，D3和div可以輕松地相互抓取高度，邊距等，以使彼此對齊。 在此新版本中，該指令將其分開，我無法訪問該指令之外創建的div。 graph和svg元素是使用以下方法制作的：

var svg = d3.select(element[0])
                            .append('svg')
                                .attr('width', '60%')
                                .attr('id', 'chart');

現在，我需要在酒吧旁邊的div非常復雜，我想以這種方式制作它們，但這是我首先嘗試的方法：

var svg = d3.select(element[0])
                                .append('div')
                                .attr('id', 'chart');

這只給了我一個小div，嘗試在其中添加元素似乎有點多。

如何在D3 svg圖的右側創建具有正確信息的div，並使其與Angular JS自定義指令中的條對齊？

有人通過信息幫助創建了D3角度指令的示例，我嘗試查看工具提示，但它們都是非常簡單的工具提示，對我沒有幫助。

Answer 1

我對D3的了解非常有限。 我了解到D3實際上只能制造和控制SVG元素，最終我要做的是在SVG內創建一個foreignObject，並用我想要的div和html填充該ForeignObject。

然后，我可以使用優質的'ol fashion CSS使其以我想要的方式居中。