d3.js forceSimulation () с масштабированием и перетаскиванием (я не могу добавить текстовую метку с информацией об узлах) [duplicate]

Question

d3.js forceSimulation () с масштабированием и перетаскиванием (я не могу добавить текстовую метку с информацией об узлах) [duplicate]

Лучшие подходы к CSS 3 .

Модель коробки:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

В соответствии с вашей практичностью вы также можете использовать box-orient, box-flex, box-direction свойства.

Flex:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Подробнее о центрировании дочерних элементов

И это объясняет, почему модель коробки является лучшей подход:

Почему модель коробки W3C считается лучшей?

6

javascript d3.js svg

задан Shuan Wu 5 June 2016 в 08:45

1 ответ

Другие вопросы по тегам:

javascript d3.js svg

Похожие вопросы:

score 11 · Accepted Answer

Прямо сейчас вы добавляете элементы text к элементам circle, и это просто не сработает.

Когда вы пишете ...

var label = nodes.append("svg:text")

Вы добавляете тексты к выбору nodes. Однако вы должны иметь в виду, что nodes:

var nodes = svg.selectAll("circle")
    .data(dataset.nodes)
    .enter()
    .append("circle")

Таким образом, вы добавляете тексты в круги, и это не работает. Они отображаются, когда вы проверяете страницу (как <circle><text></text></circle>), но ничего не будет отображаться в SVG.

Решение: просто измените на:

var label = svg.selectAll(null)
    .data(dataset.nodes)
    .enter()
    .append("text")
    .text(function (d) { return d.name; })
    .style("text-anchor", "middle")
    .style("fill", "#555")
    .style("font-family", "Arial")
    .style("font-size", 12);

скрипка: https://jsfiddle.net/gerardofurtado/7pvhxfzg/1/