Question

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

如您所见，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/

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/

D3：如何在折线图中显示单独的点

1 个答案: