How do i add two different shapes to D3 forced directed graph based on shape field value?

Question

I am newbie to D3. I am using force directed graph. I want to add two different type of shapes at node's places. My json is following: ``` { "nodes":[ {"name":"00:00:00:00:00:00:00:01","group":0,"shape":1}, {"name":"00:00:00:00:00:00:00:02","group":1,"shape":1}, {"name":"00:00:00:00:00:00:00:03","group":2,"shape":1}, {"name":"00:00:00:00:00:00:00:11","group":0,"shape":0}, {"name":"00:00:00:00:00:00:00:21","group":1,"shape":0}, {"name":"00:00:00:00:00:00:00:31","group":2,"shape":0}, {"name":"00:00:00:00:00:00:00:32","group":2,"shape":0}, {"name":"00:00:00:00:00:00:00:12","group":0,"shape":0}, {"name":"00:00:00:00:00:00:00:22","group":1,"shape":0} ], "links":[ { "source": 0, "target": 0, "value": 5 }, { "source": 1, "target": 1, "value": 5 }, { "source": 2, "target": 2, "value": 5 }, { "source": 3, "target": 0, "value": 5 }, { "source": 4, "target": 1, "value": 5 }, { "source": 5, "target": 2, "value": 5 }, { "source": 6, "target": 2, "value": 5 }, { "source": 7, "target": 0, "value": 5…

Accepted Answer

You can do this, as shown in e.g. this example, by using a symbol generator and `path` elements instead of SVG elements for specific shapes. The code to add shapes becomes

```
var node = svg.selectAll(".node")
  .data(data.nodes)
  .enter().append("path")
  .attr("class", "node")
  .attr("d", d3.svg.symbol()
    .type(function(d) { return d3.svg.symbolTypes[d.s]; }))
  .style("fill", function(d) { return color(d.group); })
  .call(force.drag);
```

Then you also need to change your `tick` handler to change the `transform` attribute of the `path` elements:

```
node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
});
```

Complete jsfiddle here.

How do i add two different shapes to D3 forced directed graph based on shape field value?

Solution

Problem

Related problems