dc.js - 箱线图数据点异常值的对齐方式和颜色

Question

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

此外，我可以为数据点着色吗？

当前和所需的屏幕截图附在其中。

标签： dc.jscrossfilter

Answer 1

您可以使用

.dataWidthPortion(0)

根本不分散要点。文档。

如果没有访问器，则有关更改任何内容的颜色或样式的一般建议：

1. 在图表选择器 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]);
       })
   });
   

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

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

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

所以我们需要得到绑定到盒子的数组。幸运的是d3.select(this.parentNode).datum()会给我们盒子的键/值对。

对于这个例子，我们根据 Y 值对颜色进行编码，我们通过查看内部来获得boxDatum.value。您没有指定您希望点如何着色，但这会显示可用的数据。