Passing a string to symbol().type() doesn't work

[jharris4]

I just noticed that passing a string to specify a symbol type doesn't work anymore in d3 v4.

import { symbol } from 'd3-shape';

let theSymbol = symbol().type('diamond');
console.log(theSymbol());

Results in the following error:

d3-shape.js?77ca:733 Uncaught TypeError: type.apply(...).draw is not a function

Was this intentional? If so, it'd be great if the docs for v4 stated so. :-)

I can workaround this by passing in the appropriate symbol object from the symbols folder (https://github.com/d3/d3-shape/tree/master/src/symbol)

But having some kind of string mapping like in the old code would be great! (https://github.com/mbostock/d3/blob/master/src/svg/symbol.js)

I love the work you're doing on d3 v4 by the way, I'm finding it really easy to use without selections in a React app I'm building.

[mbostock]

It is intentional, and the docs for symbol.type state:

See symbols for the set of built-in symbol types. To implement a custom symbol type, pass an object that implements symbolType.draw.

For example, in ES5:

var symbol = d3.symbol().type(d3.symbolDiamond);

Or ES6:

import {symbol, symbolDiamond} from "d3-shape";

let diamond = symbol().type(symbolDiamond);

See #23 and d3/d3-ease#13 for some of the history and motivation for D3 4.0’s standardization on symbols rather than strings as identifiers.

[braigo64]

I know this is closed, but just wanted to chime in with an odd issue I experienced related to this. I tried passing a string to the symbol.type() and got the same error as above. To debug, I swapped out d3.min.js with d3.js to step through what was happening, realized I couldn't pass a string and used one of the built in symbols instead. But I still got the same error.

Turned out that while d3 was unminimized during my debugging that an included lodash.js library was grab scope of the type variable within symbol, which would end up showing the same error as before since it wasn't a valid object with draw(). Changing the type variable within symbol to something like symtype worked and of course going back to using d3.min.js also worked. Not sure why lodash was stealing scope of that variable but it was.

TLDR: For those who don't use the minified version of d3 you might want to change the name of the type variable to avoid scope conflicts.