在d3.js堆叠条形图中删除或跳过空值,可以通过以下步骤实现:
var filteredData = data.filter(function(d) {
return d.value !== null; // 过滤掉值为null的数据点
});
var stack = d3.stack()
.keys(["series1", "series2", "series3"]) // 系列名称
.value(function(d, key) { return d[key]; }); // 系列值
var stackedData = stack(filteredData);
var bars = svg.selectAll(".bar")
.data(stackedData)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.data.category); })
.attr("y", function(d) { return yScale(d[1]); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); })
.attr("fill", function(d) { return colorScale(d.key); });
这样,你就可以创建一个堆叠条形图,并且已经跳过了空值。
关于d3.js堆叠条形图的更多信息和示例,你可以参考腾讯云的数据可视化产品-DataV,它提供了丰富的图表组件和功能,可以帮助你轻松创建各种类型的数据可视化图表。详情请访问:DataV产品介绍
领取专属 10元无门槛券
手把手带您无忧上云