c3.js：根据间隙/空值隐藏系列中的点答案

【问题标题】：c3.js: Hide dots in the series based on gap/null valuesc3.js：根据间隙/空值隐藏系列中的点
【发布时间】：2017-05-29 10:39:28
【问题描述】：

我正在尝试使用他们的 API 从某个服务复制图表，但我在显示差距时遇到了问题。所以时不时地流不提供某些来源的信息，我通过在列中放置空值和 connectNull: false 来处理它。

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

[null, 66, null]

所以没有任何事情发生，因为点被隐藏了，但我想显示这个值。我正在考虑在某些点上使用 css for force 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);
                },
            }
        }
    }
});

【问题讨论】：

而不是 null 只是给 0 并尝试。
它将连接到 0 值，我需要知道源更新中的差距

标签： javascript d3.js charts stream c3.js

【解决方案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/ - 完整的小提琴

【讨论】：