javascript - D3行.defined（）具有不同的数组(D3 line .defined() with different array)

Question

Link to ObserveableHQ: https://observablehq.com/@kickout/rectangles

(链接到ObservableHQ： https ://observablehq.com/@kickout/rectangles)

I've looked at these sources here , here

(我在这些来源看这里 ， 这里)

Problem I am trying to solve: I draw 3 separate paths on a nested data object (each a different color).

(我要解决的问题：我在嵌套的数据对象（每个颜色不同）上绘制了3条单独的路径。)

Those paths are drawn based on (x,y) data.

(这些路径是根据（x，y）数据绘制的。)

I want to have a the lines break when a different array (z) doesn't match (d.chr in my case)

(我想在其他数组（z）不匹配时断行（我的情况是d.chr）)

Line chart portion:

(折线图部分：)

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 function (works fine without defined snippet):

(线路功能（无需定义摘要即可正常运行）：)

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

Do i pass the entire d to the line function (haven't got that to work) so that I can access both the y array ( d.effects ) and the defined array ( d.chr )?

(我是否将整个d传递给line函数（尚未起作用），以便可以访问y数组（ d.effects ）和定义的数组（ d.chr ）？)

I basically want to use a different array for d3.line().defined() than i do for d3.line().y()

(我基本上想对d3.line().defined()与我对d3.line().y()不同的数组)

  ask by K.J.J.K translate from so

Answer 1

d3.line().defined just needs an array with true/values or null so there are a couple options:

(d3.line().defined只需要一个包含true / values或null的数组，因此有两个选项：)

1) Calculate and array with the length of the array you pass to 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)

(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)Option 1 will work, but i think it will exclude points that already have data, so I spliced in some null values, and just copied every other approach ( .defined(d => !isNaN(d.value)) :

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