D3 диаграмма для рисования пончиков

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

Я добавил текст в центр, но он не совсем по центру. Есть ли кто-нибудь, кто мог бы помочь мне сосредоточиться? Я попробовал добавить «margin-top», чтобы сбить его, но это не работает, и я не делаю много вещей, которые я пробовал.

Вот конкретная часть, которая прикрепляет текст:

svg.append("text") 
     .attr({ 
     "text-anchor": "middle", 
     }).style({'fill': 'red', 'font-size': '18px'}).text(calories); 
};

Codepen: http://codepen.io/anon/pen/xwwBBm

источник

2015-09-12 socialight

Попробуйте это http://stackoverflow.com/questions/28097184/adding-text-to-the-center-of-a-d3-donut-graph –

, это именно тот вопрос, который я использовал, чтобы помочь мне добавить средний текст в первую очередь. Результат - то, что вы видите в моем кодефене. Это не сосредоточено. – socialight

Я понимаю. Я вижу проблему вертикального выравнивания. Я не эксперт svg, но вот пример для этого: http://stackoverflow.com/questions/19622421/d3-js-vertical-alignment-of-text-in-a-donut-chart –

Вы можете заметить, что две метки вне круга вертикально по центру, но один в середине не ,

Это отсутствует следующая строка:

.attr('dy', '0.35em')

Это новый codepen.

Я оставлю вас, чтобы выяснить, почему это та линия волшебно.

источник

2015-09-12 20:40:38 VividD

да! большое спасибо! – socialight

D3 диаграмма для рисования пончиков

ответ

Смежные вопросы