javascript - c3.js:根据间隙/空值隐藏系列中的点

Question

我正在尝试使用某个服务的 API 复制图表，但在显示间隙时遇到问题。因此，流时不时地不会提供某些来源的信息，我通过在列中放入 null 值并 connectNull: false 来处理该问题。

但是有一种情况是值被空值隔离

[null, 66, null]

所以什么也没有发生，因为点被隐藏了，但我想显示这个值。我正在考虑在某些点上使用 css 强制 opacitiy:1 但我无法检测到它们。有什么建议吗？

self.chart = c3.generate({
    bindto: d3.select('#' + self.chartDivId),
    data: {
        x: 'x',
        xFormat: self.options.xAxisTimeFormat,
        columns: self.chartDataSet,
    },
    line: {
        connectNull: ???
    },
    point: {
        show: ???
    },
    tooltip: {
        show: true,
        grouped: true
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                fit: false,
                format: self.options.xAxisTimeFormat,
                localtime: false
            }
        },
        y: {
            min: 0,
            tick: {
                fit: false,
                format: function(d) {
                    return self.yFormatter(d);
                },
            }
        }
    }
});

Answer 1

将此 onrendered 例程添加到您的图表声明中。它查找所有 c3-circles 类(每个数据系列的点)，然后测试与它们关联的数据是否有孤立的数据点。然后使用它们设置相关单个圆圈(点)的不透明度。

onrendered: function () {
    var circles = d3.select("#chart").selectAll(".c3-circles");
    circles.each (function (d) {
        var isolates = d.values.filter (function(obj, i) {
            var precedeNull = (i === 0 || d.values[i-1].value === null);
            var followingNull = (i === d.values.length-1 || d.values[i+1].value === null);
            return precedeNull && followingNull;
        });
        var indexSet = d3.set (isolates.map (function (iso) { return iso.index; }));
        d3.select(this).selectAll("circle.c3-circle").style("opacity", function (d,i) {
            return indexSet.has(i) ? 1 : 0;    
        });
    })
}

http://jsfiddle.net/ht2nrmg7/ - 完整的 fiddle