Пузырьковая диаграмма и строчная диаграмма не синхронизированы c, d c. js - PullRequest
Новая
       9

Пузырьковая диаграмма и строчная диаграмма не синхронизированы c, d c. js

1 голос
/ 21 апреля 2020

Существует простая пузырьковая диаграмма (измерение по уровню1, уровню2) и строковая диаграмма (измерение по уровню_1), см. https://codepen.io/shakraz/pen/dyYXxJy

    var houseDim = ndx.dimension(d=>[d.district, d.name, d.price, d.flat_rate, d.building_rate]); 
var districtDim = ndx.dimension(d=>[d.district])

Когда я нажимаю на строчную диаграмму, я ожидайте увидеть только отфильтрованные пузырьки, верно? Но это не работает. Но это работает наоборот, нажимая на строчную диаграмму пузырьковых фильтров, почему это так? Наверняка это как-то связано с функцией Reduce . Спасибо за любое продвижение.

1 Ответ

1 голос
/ 21 апреля 2020

Лучше оставить все меры в value части группы кроссфильтров и оставить только index в key.

* 1008. * Crossfilter будет группировать группы в соответствии с функциями групп и клавиш измерения. Ваш инстинкт был верен: вы должны иметь возможность использовать d.name, потому что вы хотите, чтобы в каждой строке данных был пузырь, а d.name - это уникальный ключ. 
var houseDim = ndx.dimension(d=>d.name);

Вот один простой способ скопировать каждая строка в значении группы: 

var houseGroup=houseDim.group().reduce(
  (p, d) => ({...p, ...d, count: (d.count || 0) + 1}), // add
  (p, d) => ({...p, count: p.count - 1}), // remove
  ()  => {} // init
);

При добавлении строки будут скопированы данные из строки, добавлено поле с именем count. Поскольку ключи уникальны, число будет равно 1 или 0, в зависимости от того, фильтруется или нет строка.

Теперь мы можем использовать описательные имена полей вместо индексации массивов в коде: 

.keyAccessor(function (p) {
  return p.value.flat_rate;
})

.valueAccessor(function (p) {
  return p.value.building_rate;
})
// ...
.title(function (p) {
   return p.key + "\n"
   + "Индекс квартиры: " + p.value.flat_rate + "\n"
   + "Индекс дома: " + p.value.building_rate + " \n"
   + "Район: " + p.value.district + "\n"
   + "Цена: " + p.value.price
})

Нам также необходимо визуально исключить кодирование, используя d.value.count в некоторых средствах доступа. Мне нравится отправлять как радиус, так и непрозрачность на ноль, но оставление радиуса и использование только непрозрачности также имеет эффект затишья. 

.radiusValueAccessor(function (p) {
  console.log('radius', p)
  return p.value.count * priceScale(p.value.price);
})
// .colors(colorScale)
// .colorAccessor(function(p) {return p.value.district})
.colorCalculator(p => p.value.count ? colorScale(p.value.district) : 'rgba(0,0,0,0)')

Пузырьковая диаграмма не отображает непрозрачность в своих опубликованных c api, но этот трюк colorCalculator отправляет непрозрачность в ноль, когда count равен 0, и вызывает обычное colorScale для значения в противном случае.

Я также должен был указать на правильное значение d c. css URL для того, чтобы заставить работать поведение выбора. 

<link rel="stylesheet" href="https://unpkg.com/dc/dist/style/dc.css">

Рабочая ветвь вашего кода

...