Styling: Changing the Nodes to Different Shapes

There is more than one way to change the nodes to different shapes, but perhaps the simplest way to do this is to replace the section of the JavaScript that appends the circle with one that appends a symbol from D3’s symbol generator.

Symbols in D3

There are six predefined symbol types as follows:

• Circle (d3.symbolCircle): A circle
• Cross (d3.symbolCross): A Greek cross or plus sign
• Diamond (d3.symbolDiamond): A rhombus
• Square (d3.symbolSquare): An axis-aligned square
• Triangle (d3.symbolTriangle): An upward-pointing equilateral triangle
• Star (d3.symbolStar): A five pointed star
• Y (d3.symbolWye): A Y shape

The code

If we start with our “tree-styling” script from the “Styling: Changing Node and Link Colors” lesson, we can replace the code block that added the circles with the following script that will look at the value in the data and assign either a cross or a diamond depending on the value