typescript - Typescript/d3,不能动态提供符号类型
问题描述
我正在尝试扩展网络可视化工具,使用户能够为网络中的节点设置自定义符号。尝试动态设置此形状时,出现错误:
Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "function n(n,r){…".
在我看来,它不是给它一个函数返回的实际路径数据,而是传递函数本身。
我已经在此处查看了类似问题的 javascript 代码Setting d3 symbol conditionally and here Passing a function to .attr('d')? . 我也在打字稿中尝试了一个类似的用例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
通过会改变它。
解决方案
.attr('d', (d: any) => d3.svg.symbol().type(shape(d))())
给出一个 TS2349 错误 - 所以我之前已经将其关闭 - 但如果该错误被抑制,似乎可以正常工作。
推荐阅读
- python - 如何更改矩阵的字符?(没有 Numpy)
- python-3.x - 迭代 DF 以制作绘图
- node.js - TypeError:无法使用 React 在使用本地 IP 的移动设备上读取未定义的属性“getUserMedia”
- angular - 以角度设置 TinyMCE 编辑器页面大小插件的值
- ios - 在 SwiftUI 中将数组与 Identifiable 一致
- php - 从时间戳转换为日期时,Laravel 显示错误的日期:Y/n/j
- python - 如何使用 AddMultiplicationEquality 添加约束?
- visual-studio-code - 远程 SSH 连接失败
- node.js - 如何在 Bigcommerce 结帐页面中创建文件上传表单并将其链接到订单 ID?
- python - 在 VS Code 中调试 Python 时如何自定义对象的字符串表示