Добавить/обновить метки к графику d3.js

Я новичок в d3.js, и у меня проблемы с синтаксисом.

Обычно я знаю, как добавлять метки к графику... но не с этим кодом (который я взял из D3.js Force Layout — отображение только части графика )

Я пробовал различные решения [ .append("text"), enter().append("text")....], но безуспешно.

Вот часть кода, где я думаю, что мне нужно что-то изменить (и ниже кода вы найдете репозиторий gihub всего этого)

        this.link = this.link.data(this.force.links(), function (d) {

            return d.source.id + "-" + d.target.id;
        });

        this.link.enter().insert("line", ".node").attr("class", "link")

            .style("opacity", 0)
            .transition().duration(1000)

            .style("opacity", 1);

        this.link.exit()
            .remove();



        this.node = this.node.data(this.force.nodes(), function (d) {
            return d.id;

        });

        if (this.node.enter().empty()==false ||this.node.exit().empty() == false) {
            transition = true;
        }


        this.node.enter()
            .append("circle")
            .style("opacity", 1)
            .attr("class", "node")
            .style("fill", function (d) {
                return d.color;
            })
            .attr("r", 18)
            /*.on('mouseover', this.mouseOver)*/
            .on('mousedown', this.mouseDown)
            .on('mouseout', this.mouseOut)
            .on("dragstart", this.dragStart)
            .on("click", this.click)
            .call(this.nodeDrag)
            .transition().duration(1000)
            .style("opacity", 1)
            .each("end",function(){transition=false;});


        this.node.each(function(d) {
            if (d.centerNode==false) {
              this.setAttribute('r',12);
            } else if (firstRound) {
                this.setAttribute('r',30);
                firstRound  =false;
            }
        });





        this.node.exit().transition().duration(1000).style("opacity", 0)
            .each("end",function(){transition=false;})
            .remove();

https://github.com/coulmont/pornograph


person user1788720    schedule 07.02.2014    source источник
comment
К чему вы хотите добавить ярлыки? node?   -  person Lars Kotthoff    schedule 07.02.2014
comment
да ! Я хотел бы добавить метки к узлам (либо в центре узла, либо сбоку)   -  person user1788720    schedule 07.02.2014


Ответы (1)


Чтобы добавить несколько наборов элементов для одного выбора .enter(), вам нужно получить к нему доступ несколько раз. Обычно рекомендуется группировать наборы элементов.

var gs = this.node.enter().append("g");
gs.append("circle")
        .style("opacity", 1)
        .attr("class", "node")
        .style("fill", function (d) {
            return d.color;
        }) // etc
gs.append("text")
  .style("text-anchor", "center")
  .text(...);
person Lars Kotthoff    schedule 07.02.2014
comment
спасибо... не работает... Как вы думаете, мне нужно заменить каждый экземпляр this.node на gs? - person user1788720; 07.02.2014
comment
Да, остальная часть вашего кода должна отражать это изменение. Может быть проще просто переназначить this.node. - person Lars Kotthoff; 07.02.2014
comment
переназначить означает это? вар this.node = this.node.enter().append(g); - person user1788720; 07.02.2014
comment
Подождите, нет, отбросьте это - не будет работать с другими вариантами выбора. Вам нужно изменить остальную часть вашего кода, чтобы отразить, что this.node теперь является g элементами с circles и texts внизу. - person Lars Kotthoff; 07.02.2014
comment
Спасибо... Я просмотрю код, чтобы увидеть, где я могу заменить this.node на gs... Я все еще не понимаю! - person user1788720; 07.02.2014
comment
Не могли бы вы сузить его до небольшого полного примера? В вашем репозитории много кода, и я не могу пройтись по всему этому. - person Lars Kotthoff; 08.02.2014
comment
Спасибо, но не беспокойтесь... Мне придется учиться на собственном горьком опыте! Я думал, что мне нужно только изменить файл view.js, но я не уверен. Я связался с пользователем dorjeduck (потому что это его код)... - person user1788720; 08.02.2014