javascript - 定义行中的 Null/Empty 与 Zero/0

Question

我有一个图表，其中显示了几个堆叠的区域和线条。我想堆叠区域以在一个点处停止，而线条从那里继续。

我通过在我使用的 CSV 中保留空值并将此行添加到每个行/区域变量来实现此目的:

.defined(function(d) {return d.prioFinishA;})

这工作了一段时间，但是有一个大问题。这也会过滤 0 值。因此，如果我在 CSV 的某处有一个零，它会将其视为缺失值，并在该点断开线/区域。考虑到我希望我的所有行都以 0 值结束，这是一个大问题。

我找到了一个小的解决方法，它使用:0.00001 值而不是 0，这非常接近，但这是一个非常难看的“解决方案”。

预先感谢您的帮助!

Answer 1

这里的问题不是行生成器，而是行函数。让我们看看:

您正在使用行函数(我可以在您删除的答案中看到它)将字符串转换为数字，如下所示:

function type(d) {
  d.foo = +d.foo
  return d;
}

问题是，当您对空值执行此操作时，一元加号会将它们转换为零:

console.log(+"")

而且，正因为如此，您不能在 defined 中使用正确的函数，如 this comment 中所述。 ，即:

.defined(function(d) {return d.prioFinishA !== "";})

看看这个演示，我正确地使用了 defined，但是空字符串被 row 函数更改为零:

var svg = d3.select("svg");
var csv = `col,value
1,40
2,30
3,100
4,60
5,
6,
7,90
8,120
9,100`;

var data = d3.csvParse(csv, function(d) {
  d.col = +d.col;
  d.value = +d.value;
  return d;
});

var scale = d3.scaleLinear().range([150, 0]).domain([0, 150])

var lineGen = d3.line()
  .x(d => d.col * 30)
  .y(d => scale(d.value))
  .defined(function(d) {
    return d.value !== ""
  })

var line = svg.append("path")
  .attr("fill", "none")
  .attr("stroke", "teal")
  .attr("stroke-width", 2)
  .attr("d", lineGen(data));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

因此，如果值是空字符串，我们必须检查行函数，如果不是，则强制转换为数字。您可以使用 if(更可取，因为更易读)或使用:

d.foo = d.foo && +d.foo;

这是相同的演示，但现在空字符串不显示了:

var svg = d3.select("svg");
var csv = `col,value
1,40
2,30
3,100
4,60
5,
6,
7,90
8,120
9,100`;

var data = d3.csvParse(csv, function(d) {
  d.col = +d.col;
  d.value = d.value && +d.value;
  return d;
});

var scale = d3.scaleLinear().range([150, 0]).domain([0, 150])

var lineGen = d3.line()
  .x(d => d.col * 30)
  .y(d => scale(d.value))
  .defined(function(d) {
    return d.value !== ""
  })

var line = svg.append("path")
  .attr("fill", "none")
  .attr("stroke", "teal")
  .attr("stroke-width", 2)
  .attr("d", lineGen(data));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>