0

I'm new to d3.js, and I struggle with the syntax.

I usually know how to add labels to a graph... but not with this code (which I have taken from D3.js Force Layout - showing only part of a graph )

I have tried the various solutions [ .append("text"), enter().append("text")....] but I have been unsuccessful.

Here is the part of the code where I think that I have to change something (and, below the code, you'll find a gihub repo of the entire thing)

        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

Community
  • 1
  • 1
user1788720
  • 327
  • 2
  • 11

1 Answers1

1

To append multiple sets of elements for one .enter() selection, you need to access it several times. It's usually a good idea to group sets of elements.

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(...);
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • thanks... not working... Do you think I need to replace every instance of "this.node" with "gs" ? – user1788720 Feb 07 '14 at 11:50
  • 1
    Yes, the rest of your code would have to reflect this change. It might be easier to simply reassign `this.node`. – Lars Kotthoff Feb 07 '14 at 11:53
  • to reassign means this ? var this.node = this.node.enter().append("g"); – user1788720 Feb 07 '14 at 11:59
  • 1
    Wait, no, scrap that -- wouldn't work with the other selections. You need to change the rest of your code to reflect that `this.node` is now `g` elements with the `circle`s and `text`s underneath. – Lars Kotthoff Feb 07 '14 at 12:04
  • Thanks... I will review the code to see where I can replace `this.node` with `gs`... I still have trouble understanding ! – user1788720 Feb 07 '14 at 12:14
  • Could you narrow it down to a small complete example? There's a lot of code in your repository and I can't really go through all of that. – Lars Kotthoff Feb 08 '14 at 13:42
  • Thank you but do not bother... I will have to learn the hard way ! I thought that I only needed to modify the view.js file, but I'm not sure. I've reached to user `dorjeduck` (because that's his code)... – user1788720 Feb 08 '14 at 14:56