D3 Диаграмма Угловая директива Infobox alignment

Question

Мне недавно была назначена задача на моей стажировке, чтобы помочь преобразовать стиль из старого проекта в обновленный Verison, используя AngularJS.

У меня есть этот график в старой версии:

График выполнен в D3 на обеих версиях, но в новой версии графика в пользовательской угловой директивы.

Что мне нужно сделать, это выровнять цены и названия справа от баров, как показано на рисунке.

В старом кодексе это был один большой JS-файл, где D3 и divs могли захватывать высоту, поля и т. Д. Друг от друга, чтобы поддерживать друг друга. В этой новой версии директива сохраняет ее довольно раздельно, я не могу получить доступ к divs, созданным на стороне директивы. И граф и SVG элементы выполнены с помощью этого:

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

теперь дивы мне нужно рядом с Бруски много к сложному, я думаю, чтобы сделать их таким образом, но это то, что я пытался сначала:

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

Это только дает мне небольшой div, и попытка добавить элементы внутри кажется немного.

Как создать div с соответствующей информацией справа от моего графика D3 svg и сохранить его в соответствии с полосами внутри пользовательской директивы Angular JS?

Примеры того, кто сделал угловую директиву D3 с информацией, помогает, я пробовал смотреть всплывающие подсказки, но все они - очень простые подсказки инструментов, которые мне не помогли.

Answer 1

Мое понимание D3 было очень ограниченным. Я узнал, что D3 может по существу только создавать и управлять элементами SVG, что я в конечном итоге делал, создавая foreignObject внутри SVG и заполнял этот foreignObject с помощью div и html, которые я хотел.

Тогда я смог использовать хороший «модный стиль CSS», чтобы сосредоточить его так, как я хотел.