具有不同数组的 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}))