c3.js：根据 gap/null 值隐藏系列中的点

Question

我正在尝试使用他们的 API 从某个服务复制图表，我在显示差距时遇到了问题。因此，流不时地不提供某些来源的信息，我通过将空值放入列和 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 圆类（每个数据系列的点），然后测试与它们关联的数据以查找孤立的数据点。然后这些用于设置相关的单个圆圈（点）的不透明度。

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

c3.js：根据 gap/null 值隐藏系列中的点

c3.js: Hide dots in the series based on gap/null values

javascript

charts

stream

d3.js

c3.js