Javascript 具有不同数组的D3 line.defined（）

链接到ObservableHQ：

我看过这些资料来源

我试图解决的问题是：我在一个嵌套的数据对象上绘制了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)
    })

行函数（无需定义代码段即可正常工作）：

我是否将整个

d

传递给line函数（该函数尚未运行），以便可以访问y数组（

d.effects

）和定义的数组（

d.chr

）？我基本上希望对

d3.line（）.defined（）

使用不同的数组，而不是对

d3.line（）.y（）

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？真：空）

2） 选项1会起作用，但我认为它会排除已经有数据的点，所以我拼接了一些空值，并只是复制了其他方法（

.defined（d=>！isNaN（d.value））

：

line = d3.line()
  //.defined(d => ndat1[d.chr]==1)
  .x((d, i) => xScale(i))
  .y(d => yScale(d))

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