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

标签： javascriptd3.js

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