箱形图数据点离群点的对齐方式和颜色 [英] Alignment and Colors of Data Point Outliers of Box Plot

问题描述

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

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

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

解决方案

您可以使用

  .dataWidthPortion(0) 

根本不散布这些点.

Is it possible to align the data points and outliers of box plot in one straight line like in center of box plot?

Additionally, can I color the data points?

The current and the desired screen shot are attached with it.

解决方案

You can use

.dataWidthPortion(0)

to not spread the points out at all. Documentation.

General advice on changing the color or style of anything, if there is no accessor for it:

1. Look for the chart in the chart selectors wiki, or if it's not there, inspect the item you want to change in the developer tools and find out what SVG tag and CSS class the item has. In this case, it's circle.data

2. Add a pretransition handler which selects the items you want, and changes them:

   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]);
       })
   });
   

   In this case, we're creating an ordinal scale to map the available data to the colors in a color scheme.

The interesting question is here is what data to bind to the color of the dots, and how to get that data.

A box plot's data consists of an array of key/value pairs where each value is a Y value. When the box plot draws it will bind each circle.dot element to the index of the data in the array.

So we need to get the array that is bound to the box. Luckily d3.select(this.parentNode).datum() will give us the key/value pair for the box.

For this example, we are encoding the color based on the Y value, which we get by looking inside boxDatum.value. You don't specify how you want the dots colored but this shows the data that is available.

这篇关于箱形图数据点离群点的对齐方式和颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！