javascript - D3 : how to show lone point in a line chart

Question

我有一些数据，其中很少有数据点可能不可用(=== null)。为了显示数据丢失，我使用 d3 的 line.define 函数(如 here 所示)。问题是，有时我有一个点，两边都没有值，因此不会显示在图表上。

演示:http://jsfiddle.net/nxrdybdx/3/

如您所见，4 月 27 日和 29 日的数据缺失，因此该线不相交。伟大的。 4月28日的数据值非空，但不显示。

我希望 4 月 28 日显示一个点。我错过了什么？我是否需要添加与每个点相对应的点(svg 圆)，以便单独时每个点都会单独显示？

Answer 1

你只是用

画线

svg.append("path") // Add the valueline path.
.attr("d", valueline(data));

如果您想像您提供的示例一样绘制圆圈，则需要添加

svg.selectAll(".dot")
    .data(data.filter(function(d) { return d; }))
  .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);

参见http://jsfiddle.net/tgx48xzn/

附注:

如果你想隐藏空值点，你可以有

.filter(function(d) { return d.close !== null })

参见http://jsfiddle.net/tgx48xzn/1/

附注2

如果您只想显示孤立点，请像这样过滤

.filter(function(d, i) {
    return d.close !== null && i > 1
    && data[i - 1].close === null
    && data[i + 1].close === null;

}) 

参见http://jsfiddle.net/tgx48xzn/3/