具有不同数组的 D3 行 .defined()

Question

ObserveableHQ 链接：https ://observablehq.com/@kickout/rectangles我在这里查看了这些来源我要解决的问题：我在嵌套数据对象上绘制了 3 条单独的路径（每个路径都有不同的颜色）。这些路径是根据 (x,y) 数据绘制的。当不同的数组（z）不匹配时，我想换行（在我的情况下为 d.chr）折线图部分：ndat1.forEach(function(d) {    svg.append("path")    .attr('fill','none')    .attr("class",d.name)    .attr("stroke",colors(d.name))    .attr("d", line(d.effects))    .attr('opacity',0.1)    })线功能（没有定义的代码片段可以正常工作）：line = d3.line()  //.defined(d => ndat1[d.chr]==1)  .x((d, i) => xScale(i))  .y(d => yScale(d))我是否将整个传递d给 line 函数（还没有让它工作），以便我可以访问 y 数组（d.effects）和定义的数组（d.chr）？我基本上想使用与d3.line().defined()我不同的数组d3.line().y()

Answer 1

d3.line().defined只需要一个带有真值/值的数组，或者null有几个选项：

1）计算和数组你传递给的数组的长度d3.line()，ala： breaks =  dat.map(d => d.chr).map((d,i) => ndat1[0].chr[i-1] != ndat1[0].chr[i] && i>0 ? true : null)

2）选项1会起作用，但我认为它会排除已经有数据的点，所以我拼接了一些空值，并复制了所有其他方法（.defined(d => !isNaN(d.value))：

breaks =  dat.map(d => d.chr).map((d,i) => ndat1[0].chr[i-1] != ndat1[0].chr[i] && i>0 ? i : null)

br1=breaks.filter(d => d != null)

d3.range(4).forEach((d,i) => dat.splice(br1[i],0,{'chr':null,'pos':null}))