2014-02-18 9 views
1

У меня есть два barCharts точно эквивалентен для .brushOn опции, за исключением:dc.js диаграмма не связана

pnlPerDaybarChart 
    .height(300) 
    .width(700) 
    .dimension(dims.date) 
    .group(groups.date.pnlSum) 
    .valueAccessor(function(d) { 
     return Math.abs(d.value); 
    }) 
    .renderTitle(false) 
    .x(d3.time.scale().domain([minDate,maxDate])) 
    .xUnits(d3.time.days) 
    .colors(colorChoice) 
    .colorAccessor(colorAccessorPosNeg) 
    .brushOn(false) 
    .elasticY(true) 
    .margins({left: 70 ,top: 10, bottom: 30, right: 50}) 
    .centerBar(true); 

pnlPerDaybarChartBrush 
    .height(100) 
    .width(700) 
    .dimension(dims.date) 
    .group(groups.date.pnlSum) 
    .valueAccessor(function(d) { 
     return Math.abs(d.value); 
    }) 
    .renderTitle(false) 
    .x(d3.time.scale().domain([minDate,maxDate])) 
    .xUnits(d3.time.days) 
    .colors(colorChoice) 
    .colorAccessor(colorAccessorPosNeg) 
    .brushOn(true) 
    .elasticY(true) 
    .margins({left: 70 ,top: 10, bottom: 30, right: 50}) 
    .centerBar(true); 

Они делают так, как я ожидал, но когда я использую кисть на pnlPerDaybarChartBrush, dc.js не обновляет другие один.

Кроме того, нажатие на панель в pnlPerDaybarChart не изменяет pnlPerDaybarChartBrush рендеринг (или любую другую диаграмму на веб-странице).

Является ли это ожидаемым поведением?

То, что я ожидал, что это:

  • , когда я нажимаю на один день в графике без кисти он автоматически делает все диаграммы с данными для этого конкретного дня.
  • , когда я использую кисть также визуализирует отфильтрованную график без кисти

Вот jsFiddle

+0

Можете ли вы предоставить скрипку? – user3206082

+0

обновил мой вопрос скрипкой – Chapo

+0

@Chapo - Оба графика одинаковы. Это произойдет, если вы сделаете выбор. Вы ищете диаграмму диапазона? В этом смысле вы пытаетесь использовать диаграмму в виде этой диаграммы в этой [** 'link' **] (http://nickqizhu.github.io/dc.js/) –

ответ

0

Fiddle для вашего требования.

Вы, конечно, правы.

.rangeChart это свойство, которое вам необходимо использовать.

Надеюсь, это поможет.

+0

Спасибо за ответ. Это одна из частей вопроса. См. Обновленный [jsFiddle] (http://jsfiddle.net/r4YBS/3/). Я хотел бы иметь возможность нажимать на панель в верхнем 'barChart' и обновлять' pieChart'. Есть идеи ? – Chapo

+0

У вас есть 5Y истории времени. Вы хотите один конкретный день. Вы будете фильтровать грубо с помощью кисти, а затем выберите один день, который вас интересует. Почему это не имеет смысла? – Chapo

+0

Извините, я просто не вижу, как мне поможет сборная гистограмма. Я упростил этот пример только к 5 категориям, но есть намного больше, поэтому штабельная гистограмма в основном будет нечитаемой. Плюс выбор одного бара в 1500 наблюдениях без масштабирования выходит за рамки моих возможностей. – Chapo

1

Это не похоже на то, что гистограммы dc.js поддерживают фильтрацию по умолчанию. Ожидается, что функция щетки будет фильтровать бар или линейную диаграмму (но, как вы обнаружили, у нее есть свои сложности).

Если ваши данные слишком плотным, чтобы отфильтровать его точно с помощью кисти, один вариант был бы, чтобы позволить пользователю, чтобы увеличить на размахов с помощью мыши или сенсорного события:
http://jsfiddle.net/r4YBS/4/

Единственное изменение добавление

.mouseZoomable(true); 

в конце определения гибкой гистограммы.

Альтернативно вы можете реализовать пользовательский прослушиватель кликов, который затем вызывает метод .filter() напрямую.

+0

Правильно, клик-фильтр - это поведение чистки для * обычных * гистограмм. – Gordon

Смежные вопросы