Выравнивание и цвета выбросов точек данных на графике

Question

Можно ли выровнять точки данных и выбросы прямоугольника на одной прямой линии, как в центре прямоугольника?

Дополнительно, можно ли закрасить точки данных?

Текущий и желаемый снимок экрана прилагаются вместе с ним.

Answer 1

Вы можете использовать

.dataWidthPortion(0)

, чтобы вообще не распределять точки. Документация .

Общие рекомендации по изменению цвета или стиля чего-либо, если для него нет аксессора:

1. Найдите диаграмму в селекторы диаграмм вики , или, если его там нет, проверьте элемент, который вы хотите изменить, в инструментах разработчика и выясните, какие теги 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. Когда на блок-графике dr aws он будет привязывать каждый элемент circle.dot к индексу данных в массиве .

Поэтому нам нужно получить массив, связанный с коробка. К счастью, d3.select(this.parentNode).datum() даст нам пару ключ / значение для коробки.

Для этого примера мы кодируем цвет на основе значения Y, которое мы получаем, заглянув внутрь boxDatum.value. Вы не указываете, как вы хотите, чтобы точки были цветными, но это показывает доступные данные.