Хобрук: Ваш путь к мастерству в программировании

Изменить текст и удалить Select All из dc.selectMenu

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>

    <body>

    <div id = "selectbox"> </div>
    <div id = "chart1"> </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.6/dc.min.js"></script>



 <script>   
    var facts = crossfilter([
    {"Period":"Jan-18","Department":"Dept 1","Percentage":0.2098},
    {"Period":"Feb-18","Department":"Dept 1","Percentage":0.6058},
    {"Period":"Mar-18","Department":"Dept 1","Percentage":0.691},
    {"Period":"Jan-18","Department":"Dept 2","Percentage":0.2705},
    {"Period":"Feb-18","Department":"Dept 2","Percentage":0.4113},
    {"Period":"Mar-18","Department":"Dept 2","Percentage":0.3698},
    {"Period":"Jan-18","Department":"Dept 3","Percentage":0.3239},
    {"Period":"Feb-18","Department":"Dept 3","Percentage":0.4638},
    {"Period":"Mar-18","Department":"Dept 3","Percentage":0.4036},
    {"Period":"Jan-18","Department":"Dept 4","Percentage":0.8288},
    {"Period":"Feb-18","Department":"Dept 4","Percentage":0.0809},
    {"Period":"Mar-18","Department":"Dept 4","Percentage":0.9152},
    {"Period":"Jan-18","Department":"All","Percentage":0.6104},
    {"Period":"Feb-18","Department":"All","Percentage":0.3348},
    {"Period":"Mar-18","Department":"All","Percentage":0.8257},
    ])

    var PeriodDimension = facts.dimension( function (d) {return d.Period} );
    var DeptDimension = facts.dimension( function (d) {return d.Department} );

    dc.selectMenu("#selectbox")
        .dimension(DeptDimension)
        .group(DeptDimension.group())
        .promptText("removethisline")
        .controlsUseVisibility(true);

     dc.renderAll();
 </script>

</body>

JS Fiddle здесь

Две проблемы

1) Если вы заметили, в JSFiddle мы получаем ключи и значения в раскрывающемся списке. Нам нужны только ключи, то есть нам нужны только All, Dept one, Dept two и так далее в раскрывающемся списке.

2) Поскольку у меня уже есть встроенная в данные опция «Все», как удалить значение promptText из раскрывающегося списка?

dc.js crossfilter
08.08.2018

Ответы:


1

  1. Это немного похоронено в документации, но корневой пример показывает, как вы можете использовать .title() для установки текста параметра, например:

    .title(kv => kv.key)

  2. Кажется, что этот первый элемент жестко запрограммирован, поэтому я бы прослушал событие pretransition и использовал селектор атрибутов, чтобы выбрать option с пустым значением и удалить его:

    selbox.on('pretransition', function() {
  selbox.select('option[value=""]').remove();
})
.filter("Dept 1")

Примечание. Вы можете столкнуться с тем, что другие диаграммы не складываются правильно, если ваши строки не полностью различны.

Вилка вашей скрипки.

09.08.2018

2

Для потомков приведенный выше ответ не сработал для меня с использованием CboxMenu, но это сработало:

cbox.filter("Dept 1")
.on('pretransition', function() {
  cbox.selectAll('li:not(.dc-cbox-item)').remove();
})
01.09.2020
Новые материалы
Статическая типизация в TypeScript: основы Typescript
Понимание статической типизации TypeScript, расширенный набор JavaScript, был разработан Microsoft в 2012 году для устранения некоторых ограничений JavaScript. Одним из его основных предложений..
Как использовать SAAS на благо вашего бизнеса
В деловом мире SAAS (программное обеспечение как услуга) становится все более популярным. И неудивительно, почему — SAAS предоставляет ряд преимуществ для предприятий любого размера. Вот лишь..
Приложения случайного блуждания, часть 1 (статистика + машинное обучение)
Смещенное случайное блуждание при динамической перколяции (arXiv) Автор: Себастьян Андрес , Нина Гантерт , Доминик Шмид , Перла Сузи Аннотация: мы изучаем смещенные случайные..
Интеллектуальная масштабируемая обработка видео в реальном времени в Azure
1. Введение В этом руководстве создается сквозной проект для интеллектуальной масштабируемой обработки видео в реальном времени в Azure. При этом создается возможность обнаруживать граффити и..
Варианты использования положительной изотропной кривизны, часть 6 (машинное обучение)
Четыре-орбифолды с положительной изотропной кривизной (arXiv) Автор : Хун Хуан Аннотация: Мы доказываем следующий результат: Пусть (X,g0) — полное связное 4-многообразие с равномерно..
Внутри эпистатических сетей
Регуляция нейронных сетей для лучшего прогнозирования ландшафтов биологической пригодности Сопоставьте свой индуктивный уклон с областью вашей проблемы Всем алгоритмам машинного обучения..
Создание полноценного интерфейса командной строки с использованием Python | Расширенный Python
Создание полноценного интерфейса командной строки с использованием Python — Advanced Python Чтобы изучить расширенные функции языка программирования, вам следует попробовать создать..