Я пытаюсь изменить график компоновки силы здесь http://bl.ocks.org/mbostock/4062045, добавив текст в круги, но текст не отображается. Я добавил этот блок кода в исходный код на сайте.Добавление текста в график компоновки D3
node.append("text")
.style("text-anchor", "middle")
.text(function(d) { return d.name; });
У меня нет кода в целом, но я думаю, что вы добавляете текст в кругах, и с тех пор круги маленькие, вы не видите текст.
Теперь ваши узлы в настоящее время являются кругами (я полагаю). Если вы хотите как круги, так и текст для каждого узла, ваши узлы должны быть элементами svg g (g означает «группа»), и каждому из таких элементов g вы назначаете круг и текст. Подробнее о том, что вы найдете here (код также включен)
EDIT: После того, как вы увидите ярлыки, вам понравится позиционировать их по-хорошему относительно узлов. Вот почти официальная рекомендация связана с позиционирования этикетки на узлы графа:
Для вертикального выравнивания используйте «йу» атрибут:
by default, the baseline of the text is at the origin (bottom-aligned)
a dy of .35em centers the text vertically
a dy of .72em places the topline of the text at the origin (top-aligned)
Использование em единиц хорошо, потому что она будет масштабироваться автоматически на основе на размер шрифта. Если вы не укажете единицы, по умолчанию они будут пикселями.
Для горизонтального выравнивания, используйте «текст-якорь» атрибут:
the default is "start" (left-aligned for left-to-right languages)
"middle"
"end"
Независимо от размера кругов, вы не можете добавить текстовый элемент внутри круга. Когда я связался с [этим примером] (http://bl.ocks.org/mbostock/1153292) по вашему [предыдущему вопросу] (http://stackoverflow.com/questions/21081503/text-not-rendered-in- d3-визуализация) Я должен был подчеркнуть, что он использовал элементы группы ('
P.S. Я должен уточнить, что если ваши круги достаточно велики, вы все равно можете сделать так, чтобы текст выглядел так, как будто текст находится внутри круга, центрируя текст по кругу (используйте CSS 'text {text-anchor: middle, alignment-baseline: middle;} ', чтобы он был центрирован на точку). Но в отношении браузера круг и текст должны быть элементами-братьями, а не вложенными друг в друга. – AmeliaBR
Да, а также я должен сказать, что круги и тексты могут генерироваться отдельно, без g, но в этом случае привязка данных должна выполняться дважды, один раз для кругов и второй раз для текстов. Подход с g является более чистым. Для упражнений вы можете попробовать обе позже. И вы также можете попытаться добавить некоторое изображение, как третий элемент узла. – VividD
http://bl.ocks.org/MoritzStefaner/1377729 – Jordan