javascript - 仅当圆圈具有关联注释时才在折线图中附加圆圈

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/