score:1

Accepted answer

With .append("g") you insert a SVG Group Element.

The problem is, that you try to apply attributes that are for circles, like the radius with .attr("r",15), to the group element.

You have to use circles if you want to draw a circle. Group elements do not have any shape. They are used to group elements like circles.

A solution would be to append the g element and transform it to the location of the node. I updated your code in the following snippet. I used the group elements and added the circle, image and text inside the group elements.

Moreover I removed the backslashes before each angular bracket and set the title to the field name instead of label.

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var graph = getData();

var nodeMap = {};

graph.nodes.forEach(function(d) { nodeMap[d.name] = d; });

graph.links.forEach(function(l) {
    l.source = nodeMap[l.source];
    l.target = nodeMap[l.target];
})

force.nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
    .enter()
  .append("line")
    .attr("class", "link")
    .style("stroke", function(d) {
        return d.line_color;
    })
    .style("stroke-width", function(d) {
        return Math.sqrt(d.value)+1;
    });

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter()
  .append("g")
    .attr("transform", function(d){return "translate("+d.x+","+d.y+")"})
    .call(force.drag);

node.append("circle")
    .attr("class", "node")
    .attr("r", 15)
    .style("fill", function(d) { return d.fill_color; })
    .on("click", function(d){
      alert("You clicked on node " + d.name);
    });

node.append("title")
    .text(function(d) { return d.name; });

node.append("image")
    .attr("xlink:href", function(d) { return d.image_url })
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 26)
    .attr("height", 26);

node.append("text")
    .attr("dx", function(d) { 
        if (d.image_url == "/profile.png"){
          return 100;
        }
        else{
          return 16;
        }
    })
    .attr("dy", function(d) { 
        if (d.image_url == "/profile.png"){
          return 100;
        }
        else{
          return ".35em";
        }
    })
    // .attr("dy", ".35em")
    .text(function(d) { return d.name });

force.on("tick", function() {
    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("transform", function(d){return "translate("+d.x+","+d.y+")"});
});


function getData() {
  return {
        "nodes":[
                {"name":"user1","image_url":"http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/103px-Wikipedia-logo-v2.svg.png","fill_color":"blue","text_color":"black"},
                {"name":"user2","image_url":"http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/103px-Wikipedia-logo-v2.svg.png","fill_color":"blue","text_color":"black"},
                {"name":"user3","image_url":"http://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/103px-Wikipedia-logo-v2.svg.png","fill_color":"blue","text_color":"black"},
                {"name":"tag1","image_url":"","fill_color":"blue","text_color":"black"},
                {"name":"tag2","image_url":"","fill_color":"blue","text_color":"black"},
                {"name":"tag3","image_url":"","fill_color":"blue","text_color":"black"}
            ],
        "links":[
                {"source":"tag1","target":"user1","value":1,"line_color":"green"},
                {"source":"tag2","target":"user1","value":1,"line_color":"green"},
                {"source":"tag3","target":"user1","value":1,"line_color":"green"},
                {"source":"tag1","target":"user2","value":1,"line_color":"green"},
                {"source":"tag2","target":"user2","value":1,"line_color":"green"}
        ]
  };
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


Related Query

More Query from same tag