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

Question

I was recently assigned a task at my internship to help convert the style from an old project to an updated Verison using AngularJS.

I have this graph in the old version:

The graph is made in D3 on both versions, but in the new version the graph is in a custom angular directive.

What I need to do is align the prices and names to the right of the bars as shown.

In the old code this was all one large JS file where D3 and the divs could grab the height, margins, and etc from each other easily to keep each other aligned. In this new version the directive keeps it pretty separate, I can't access divs created out side the directive. And the graph and svg elements are made using this:

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

Now the divs I need next to the bars are alot to complicated I think to make them this way but this is what I tried at first:

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

That only gives me a small div, and trying to add elements inside seem a little much.

How do I create a div with the proper information to the right of my D3 svg graph and keep it aligned with the bars inside an Angular JS custom directive?

Examples of someone who made a D3 angular directive with info helps, i tried looking at tooltips but they are all very simple tool tips which did not help me.

Answer 1

My understanding of D3 was very limited. I learned that D3 can essentially only make and control SVG elements, what I ended up doing was creating a foreignObject inside the SVG and populated that foreignObject with divs and html that I wanted.

Then I was able to use good, 'ol fashion CSS to center it the way I wanted.