CODEWITHSUNDEEP
svggraphd3.jsnodesforce-layout
user1114864
user1114864

Reputation: 1764

Different node symbols for d3.js force-directed graph

How do I display nodes as different symbols in d3.js's force-directed library? I wanted to implement something similar to what I wrote below:

  var node = svg.selectAll(".node") 
      .data(graph.nodes) 
    .enter().append(function(d){return d.shape;}) 
      .attr("class", "node") 
      .attr("r", 5) 
      .style("fill", function(d) { return color(d.group); }) 
      .call(force.drag);

Each node would have an encoded shape ("rect", "circle", etc.). However, I get the error:

Uncaught TypeError: Object function (d){return "circle";} has no method 'indexOf'

The other question I have related to that is this: how would I toggle between applying different attributes for each shape? Circles need an "r" attribute refined, but rects require "height" and "width". Thanks!

Upvotes: 6

Views: 5371

Answers (1)

mbostock
mbostock

Reputation: 51819

Use d3.svg.symbol, as in the force-directed symbols example.

Upvotes: 6

Related Questions