score:1

Ideally you should present the javascript that you have already written, and explained what it does do, and what is missing. Having said that, I recently finished work on a similar project to what you describe, so had the following results handy.

Does this jsfiddle do what you are attempting?

There are two key components. The first is in defining the text elements (here I append them to an SVG element):

var text = svg.selectAll('text')
    .data(force.nodes())
    .enter().append('text')
        .text(function (d) { return d.name });

Here I'm assuming that the nodes[] array contains objects with a .name property that is to be displayed.

The second component is to translate the text elements to their appropriate positions, inside the tick handler:

function tick () {
    text.attr('transform', function (d) {
        return 'translate(' + d.x + ',' + d.y + ')';
    });
    // Other code for nodes and links
}

See the jsfiddle for a complete working example, including commented code that should allow you to add images at the nodes if you want to try to reproduce your sample image more closely.


Related Query