箱线图数据点离群值的对齐和颜色

Question

是否可以像在箱形图的中心一样将箱形图的数据点和异常值对齐在一条直线上？

另外，我可以给数据点上色吗？

当前和所需的屏幕截图已随附。

Answer 1

您可以使用

.dataWidthPortion(0)

根本不散布点数。 Documentation.

如果没有访问器，关于改变任何东西的颜色或样式的一般建议：

在 chart selectors wiki 中查找图表，如果没有，请在开发人员工具中检查您要更改的项目，找出 SVG 标签和 CSS [=52= 】物品有。在这种情况下，它是 circle.data

添加一个 pretransition 处理程序来选择您想要的项目并更改它们：

var cc = d3.scaleOrdinal().range(d3.schemeDark2);
bp02.on('pretransition', chart => {
    chart.selectAll('circle.data').attr('fill', function(d) {
        const boxDatum = d3.select(this.parentNode).datum();
        return cc(boxDatum.value[d]);
    })
});

在这种情况下，我们正在创建一个序数比例尺以将可用数据映射到 a color scheme 中的颜色。

这里有趣的问题是要将什么数据绑定到点的颜色，以及如何获取该数据。

箱形图的数据由 key/value 对数组组成，其中每个值都是一个 Y 值。绘制箱形图时，它将每个 circle.dot 元素绑定到数组 .

中数据的索引
所以我们需要得到绑定到盒子上的数组。幸运的是 d3.select(this.parentNode).datum() 会给我们 key/value 对盒子。

在这个例子中，我们根据 Y 值对颜色进行编码，我们通过查看内部 boxDatum.value 获得该值。您没有指定点的颜色，但这显示了可用的数据。

箱线图数据点离群值的对齐和颜色

Alignment and Colors of Data Point Outliers of Box Plot

crossfilter

dc.js