CODEWITHSUNDEEP
javascriptd3.js
VerletIntegrator
VerletIntegrator

Reputation: 159

Different shapes according to data in D3 force layout

I am trying to have a force layout where there are two types of shapes: Circles and Triangles. However, I get an error- Cannot read property 'symbol' of undefined. This is the relevant code snippet:

var shape = {"action": "circle", "why-hard": "triangle"};    

var node = g.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("d", d3.svg.symbol().type(function(d) { return shape[d.type]; }))

Upvotes: 1

Views: 533

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38171

You are likely using d3v4. D3v4 has a number of namespace changes that will break code from v3, and it appears your symbol code is from v3. In this example:

.attr("d", d3.svg.symbol().type(function(d) { return shape[d.type]; }))

will give the error: Uncaught TypeError: Cannot read property 'symbol' of undefined (as noted) in Chrome, and d3.svg is undefined in Firefox. Instead for v4 try something along the lines of:

 .attr("d", d3.symbol().type(d3.symbolCross));

To assign type dynamically in v4, the approach is essentially the same as you have:

 .attr("d", d3.symbol().type( function(d,i) { return d3.symbols[i];} ) )

See fiddle here.

See https://github.com/d3/d3-shape/blob/master/README.md#symbol for v4 documentation regarding shapes.

Upvotes: 2

Related Questions