I'm trying to extend a network visualisation tool, enabling the user to set custom symbols for the nodes in the network. When trying to dynamically set this shape, I get the error:
Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "function n(n,r){…".
Which looks to me like instead of giving it actual path data returned by a function, I'm passing the function itself.
I've looked at the javascript code to similar problems here Setting d3 symbol conditionally and here Passing a function to .attr('d')? . I also tried a similar use case in typescript here https://github.com/abchakra/d3_work/blob/7b602690615790d38b00832750ead637c66e205d/gantt_ts/app/ts/lib/ganttChart.ts but it seems to be using a different version of typescript? (in the line .attr("d", d => d3.symbol().size(2400).type(d.symbol)()); no type is provided for d?)
I've simplifed what I'm trying to do slightly to make the problem more obvious.
Intuitively the code below should assign the type of the symbol to 'circle', and indeed if I just paste the string in there (.attr('d', d3.svg.symbol().type('circle'))) it works fine. If I try to pass through the d parameter in any way however, the function itself seems to be passed through as the path and I get the error above.
var shape = function(d: any){
return 'circle';
}
visualNodes = nodeLayer.selectAll('nodes')
.data(nodes)
.enter()
.append('path')
.attr('d', (d: any) => d3.svg.symbol().type(shape(d)))
.attr('class', 'nodes')
.style('fill', (n: dynamicgraph.Node) => getNodeColor(n))
...
})
I'd like to be able to use the d parameter in the shape var to assign the shape dynamically, I could probably hack my way around the problem in some way - but I'd like to at least understand why d3 is using the function itself as the path and why passing d through changes that.
