Hey, how are you doing? Awesome work here, I was trying something and I'd like to add some texts labels to each node, I've been doing something like this

    label = node.append("text")
        .attr("id",function(d) { return d.id_discogs})
        .text(function(d) { return "\u00A0 \u00A0 \u00A0"+d.name; });

    $("text").attr("dominant-baseline","before-edge");

What am I doing wrong? Do I need to change something in your code? I'm newbie using d3.js

Thanks!

Hey, to get labels take a look at this example:

http://bl.ocks.org/mbostock/950642

Instead of just having circles whose cx and cy attributes are set using the force layout, you'll want to create g elements whose transform attribute will be set in the tick function. This g will then contain a circle and text children for the node and label, respectively.

Thanks for this. Learn a lot from it.

Thank you for the code. I followed your instruction but couldn't get what I expected:

I defined the transform function outside:

         var transform = d3.transform(function tick() {
            
            link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

            node.attr('cx', function(d) { return d.x; })
            .attr('cy', function(d) { return d.y; });

        })

and then:

        node = node.data(graph.nodes).enter()
        .append("g")
        .attr(transform) 
        .append("circle")
        .attr("r", 8)
        .append("text).text(function(d) { return d.label; })
        .on("dblclick", function(d) { d3.event.stopPropagation(); })
        ."rest of the code"