Добавить легенду на круговую диаграмму в dc.js

Question

Я создаю визуализацию на основе dc.js, где одна из диаграмм представляет собой круговую диаграмму. См:

http://jsfiddle.net/luiseth/t8we6/

Особенность моего дела в том, что ярлыки, которые будут отображаться в этой таблице, как правило, довольно долго, так много, что, как правило, получить обрезан контейнером графика (<div>). Поэтому я подумал, что они появятся в легенде, но я не смог понять, как можно увидеть легенду справа от графика. Как я могу это сделать? Игра с width совсем не помогла, так как диаграмма позиционируется в центре <div>.

Мой код на данный момент:

chart.width(500) 
    .height(180) 
    .radius(80) 
    .dimension(categoryDimension) 
    .group(categoryGroup) 
    .legend(dc.legend().x(140).y(0).gap(5)); 

Плюс .label директива, чтобы заменить этикетку с процентом.

Answer 1

Я просто попытался это с CSS переопределение и, казалось, работать:

Круговая диаграмма создает SVG холст, основанный на том, что ширина вы объявляете диаграмму, а затем помещает его в центре. Я нацелился на холст SVG и добавил другую ширину и отображает. Смещение метки сквозь холст заставляет ее скрываться.

Так что, если ваша круговая диаграмма имеет ширину 200, и идентификатор «PieChart», и вы хотите добавить еще 150 пикселей на счет для метки, попробуйте следующий CSS:

#piechart svg { width: 350px; } 

Не забудьте указать эту ширину в макете страницы.