Javascript D3图表角度指令信息框对齐

我最近在实习期间被分配了一项任务，帮助我使用AngularJS将旧项目的风格转换为更新的Verison

我在旧版本中有此图：

两个版本的图形都是在D3中生成的，但在新版本中，图形是在自定义角度指令中生成的

我需要做的是将价格和名称对齐到条形图的右侧，如图所示

在旧代码中，这都是一个大的JS文件，D3和div可以轻松地从彼此获取高度、边距等信息，以保持彼此对齐。在这个新版本中，指令将其保持相当独立，我无法访问在指令外创建的div。图形和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角度指令的例子，我试着查看工具提示，但它们都是非常简单的工具提示，对我没有帮助

我对D3的理解非常有限。我了解到D3基本上只能生成和控制SVG元素，我最终做的是在SVG中创建一个foreignObject，并用我想要的div和html填充该foreignObject

然后我就可以使用好的“ol”时尚CSS以我想要的方式将其居中