Question

我正在尝试扩展网络可视化工具，以使用户能够为网络中的节点设置自定义符号。尝试动态设置此形状时，出现错误：

Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "function n(n,r){…".

在我看来，我没有传递函数返回的实际路径数据，而是传递函数本身。

我在Setting d3 symbol conditionally和Passing a function to .attr('d')?处查看了类似问题的javascript代码。我还在https://github.com/abchakra/d3_work/blob/7b602690615790d38b00832750ead637c66e205d/gantt_ts/app/ts/lib/ganttChart.ts的打字稿中尝试了类似的用例，但似乎正在使用不同版本的打字稿？（在.attr("d", d => d3.symbol().size(2400).type(d.symbol)());行中没有为d提供类型吗？）

为了使问题更加明显，我简化了我正在尝试做的事情。直观地，下面的代码应该将符号的类型分配为“ circle”，实际上，如果我只是将字符串粘贴到其中（.attr('d', d3.svg.symbol().type('circle'))），它就可以正常工作。但是，如果我尝试以任何方式传递d参数，则函数本身似乎是作为路径传递的，并且出现上述错误。

    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))
         ...
        })

我希望能够使用shape var中的d参数动态分配形状，我可能会以某种方式解决问题的方法-但我想至少了解d3为什么是将该函数本身用作路径，以及为什么通过d进行更改。

Answer 1

.attr('d', (d: any) => d3.svg.symbol().type(shape(d))())给出了TS2349错误-因此我之前已将其消除-但如果该错误被抑制，似乎可以正常工作。

Typescript / d3，无法动态提供符号类型

1 个答案: