D3:如何在折线图中显示单个点

D3: how to show lone point in a line chart

本文关键字：显示 单个点 折线图 D3      更新时间：2023-09-26

我有一些数据，其中可能没有几个数据点可用（=== null）。为了显示数据丢失，我使用d3的line.defined函数（如图所示）。问题是，有时我有一个点，它的两边都没有值，因此不会显示在图形上。

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

正如你所看到的，4月27日和29日的数据缺失，因此这条线是不相交的。太棒了4月28日的数据值为非空，但不会显示。

我希望在4月28日显示一个点。我错过了什么？我是否需要添加一个对应于每个点的点（svg圆），以便在单独显示时，每个点都可以单独显示？

您只使用绘制线条

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/

PS:

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

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

请参阅http://jsfiddle.net/tgx48xzn/1/

PS 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/

相关文章：