Добавление кругов в линейный график, только если они имеют связанные заметки

Question

Я создал этот симпатичный линейный график с кругами на каждой точке данных: jsfiddle

Моя проблема связана с кругами и заставляет их появляться ТОЛЬКО, если к точке данных прикреплены «заметки».

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")
        ;

В приведенном выше коде я прикрепляю «заметки» в виде метки, которая появляется с кружком, но я хочу, чтобы кружок только для этой точки данных показывал, есть ли для нее заметки. Я хочу сделать это, потому что, когда на графике слишком много кругов, он становится перегруженным и его труднее читать.

Как я могу показать ТОЛЬКО круги, если к точке данных прикреплены примечания?

Answer 1

В выбранных кругах отфильтруйте данные в соответствии со свойством notes:

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

Вот обновленный JSFiddle: http://jsfiddle.net/cerj7s16/1/