箱形图数据点离群点的对齐方式和颜色

Question

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

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

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

Answer 1

您可以使用

.dataWidthPortion(0)

根本不散布分数。 Documentation。

有关更改颜色或样式的一般建议（如果没有访问器的话）：

1. 在chart selectors wiki中查找图表，如果不存在，请在开发人员工具中检查要更改的项目，并找出该项目具有的SVG标签和CSS类。在这种情况下，它是circle.data

2. 添加一个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中的颜色。

有趣的问题是，哪些数据要绑定到点的颜色，以及如何获取这些数据。

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

因此，我们需要获取绑定到框的数组。幸运的是，d3.select(this.parentNode).datum()将为我们提供盒子的键/值对。

在此示例中，我们基于Y值对颜色进行编码，这是通过查看boxDatum.value来获得的。您无需指定如何给点着色，但这会显示可用的数据。