D3@6在箭头函数中寻址Map数据结构的通用方向



使用D3 v6创建Observable,我开始使用Map数据结构。虽然它似乎是基于数组的,但我很难翻译如何在箭头函数中访问地图的不同部分。

我有一个数据集形状:

dataByHub = Map(2) {
"ST" => Array(19) [Object, Object, Object... ]
"FING" => Array(27) [Object, Object, Object ...]

进入函数生成路径的数据日志看起来像:

data 
Pn {_groups: Array(2), _parents: Array(2)}
_groups: (2) [Array(19), Array(27)]
_parents: (2) [g#ST.hub, g#FING.hub]
__proto__: Object

并且,对于每个hub(_parents,它决定了我的y_hub(,我想迭代适当的Array(_group(,并将X的集合传递给一个函数以创建路径。结果应该是一条带有可变长度空格和短划线的线,表示断开连接事件。

我所拥有的。。。

D3部分看起来像,我想把X从集线器连接到一条路径:

d3.select("#hubs").selectAll(".hub")
.data(dataByHub) 
.enter().append("g")
.attr("class", "hub")
.attr("id", d => d[0])
.selectAll("path")
.data((d,i) => d[1])
.join("path")
.call(log,"data")
.style("stroke", "black")
.style("fill", "none")
.attr("d", (d,i) => segment(d.Xs,i))

使用segment((生成路径:

function segment(data, hub) {
const p = d3.path();
console.log("segment", data); //data.Xs[0]
const y_hub = hub * 100;
p.moveTo(data.Xs[0],y_hub);
p.lineTo(data.Xs[1],y_hub);
p.closePath();
// console.log("p", p);
return p.toString();
}

我为路径的.data尝试了不同的设置,但要么得到未定义,要么得到一对单独的X,而不是一系列。

基于@Robin Mackenzie关于传递数组或单个对的问题,我重构了函数以接受数组。

于是电话变成了:

.attr("d", (d,i) => events(d[1]) )

然而,解决方案的重要部分是如何获取Map的元素。缺失的部分是在"0"之后对数组的索引;数据";在"之前";。X〃;

function events(data) {
const p = d3.path();
const y_hub = yScale(data[0].Hub);
for (var n=0; n < data.length; n++) {
p.moveTo(xScale(data[n].Xs[0]),y_hub);
p.lineTo(xScale(data[n].Xs[1]),y_hub);
}
p.closePath();
return p.toString();
}

感谢我的朋友Alex Carroll在地图上提供的额外帮助。

最新更新