Javascript 仅当圆具有关联注释时才在折线图中追加圆

我创建了一个漂亮的线图，每个数据点上都有圆圈：

我的问题是圆圈，只有当数据点上有“注释”时，才能让它们出现

svg.append("path")
        .data([data])
        .attr("class", "line")
        .attr("stroke", "#6b38df")
        .attr("d", valueline);

    svg.append("g").selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("r", 4)
        .attr("cx", function(d) {
            return x(d.date)
        })
        .attr("cy", function(d) {
            return y(d.close)
        })
        .attr("fill", "none")
        .attr("stroke", "#BA85FF")
        ;

    svg.append("g").selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .attr("x", function(d) {
            return x(d.date) - paddingForText
        })
        .attr("y", function(d) {
            return y(d.close) + paddingForText
        })
        //.attr("fill", "white")
        .text(function(d) {
            return d.notes
        })
        .classed("notepoint", true)
        .style("font-family", "Roboto")
        .style("font-size", "14px")
        ;

在上面的代码中，我将“notes”作为一个标签附加在圆圈上，但我只想在该数据点的圆圈上显示是否有注释。我想这样做是因为当图表上有太多的圆圈时，它会变得拥挤，难以阅读

---

仅当数据点上附加了注释时，如何显示圆圈？

在您的圆圈选择中，根据

注释

属性过滤数据：

.data(data.filter(function(d){
    return d.notes
}))

以下是更新的JSFIDLE：