D3js: обновление данных не обновляет нужные объекты

Question

D3js: обновление данных не обновляет нужные объекты

0

Я пытаюсь построить горизонтальную шкалу календаря, используя d3.js. Основная цель - выделить праздники и отпуск для пользователя.

http://jsbin.com/ceperavu/2/edit?css,js,output

Сначала я начинаю с даты "начала" до "конца".
Затем добавьте текст.
выделите прямоугольник, который соответствует данным из vacations

но он всегда выделяет первый "n" rect.

var width = 650;
var height = 450;
var date = {start: '02/24/2014', end: '03/17/2014'};
var day = d3.time.format("%d");
var vacations = ['02/25/2014', '02/28/2014', '03/05/2014', '03/14/2014'];
var cell = {width: 20, height: 20};
var format = d3.time.format("%m/%d/%Y");

var chart = d3.select("body")
              .append('svg:svg')
              .attr('width', width)
              .attr('height', height)
              .attr('class', 'chart');



var days = chart
    .selectAll(".day")
    .data(function(d) { return d3.time.days(new Date(date.start), new Date(date.end)); })
    .enter()
    .append('svg:g');

//add rect
    days.append('svg:rect')
      .attr('width', cell.width)
      .attr('height', cell.height)
      .attr('x', function(d, i){ 
        var day = d3.time.format("%d"); 
        // console.log(day(d)); 
        return i * cell.width; })
      .attr('class', 'day')
      .append('title')
        .text(function(d){return format(d);})
      .datum(format);

//add text
    days.append('svg:text')
      .attr('width', cell.width)
      .attr('height', cell.height)
      .attr('x', function(d, i){
        return i * cell.width + cell.width/4; 
      })
      .attr('y', 14)
      // .style('text-anchor', 'middle')
      // .style('dominant-baseline', 'central')
      .text( function(d) { var day = d3.time.format("%d");return day(d); });

//highlight holidays
d3.selectAll('rect.day').data(vacations).attr('class', 'holiday');

Это неправильно d3.selectAll('rect.day').data(vacations).attr('class', 'holiday'); ?

Изменение: формат и дополнительные сведения.

hashg 20 фев. 2014, в 11:01

Источник

Теги:

javascript

jquery

d3.js

2 ответа

Ещё вопросы

FernOfTheAndes · Answer 1 · 2014-02-21T10-09-00.000Z

3

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

days.selectAll('rect.day')
    .attr('class', function (d) {
        return  ($.inArray(d.getTime(), vacations))  > -1 ? 'holiday' : 'day';
    });

FernOfTheAndes 21 фев. 2014, в 10:09

1

Для уточнения: исходный код заменял данные о датах данными об отпусках; без ключевой функции новые данные просто назначались с самого начала. Код @FernOfTheAndes захватывает все прямоугольники и стилизует их, если их дата совпадает с днем отпуска. Вы можете поочередно использовать фильтр d3 вместо проверки в вызове метода атрибута, но конечный эффект будет таким же. Фильтры предпочтительнее, если вы собираетесь установить несколько атрибутов или стилей на основе одинаковых критериев фильтра.
AmeliaBR 21 фев. 2014, в 18:56
0

Также, если у вас еще нет JQuery на вашей странице, вы можете использовать vacations.indexOf[d.getTime] > -1 . Это не работает в IE8 , но и ваша SVG графика.
AmeliaBR 21 фев. 2014, в 18:57
2

Для сравнения, скрипка использует формат фильтра: jsfiddle.net/3FrsG/1 и использует стандартный метод Javascript вместо JQuery: jsfiddle.net/3FrsG/2
AmeliaBR 21 фев. 2014, в 19:07
0

@ AmeliaBR Так приятно слышать тебя ... и в стиле, как обычно. Я одобрил ваши комментарии ... как опция фильтра d3 и стандартное сравнение дат в Javascript.
FernOfTheAndes 21 фев. 2014, в 19:20
0

@ AmeliaBR - Можете ли вы сказать мне, как это работает? if vacations.indexOf[d.getTime] > -1 . Я полностью запутался в этой части каждый раз, и я не мог получить хорошее объяснение. Будет очень полезно, если вы скажете. +1 голос :)
Unknown User 22 фев. 2014, в 10:14
1

@ UnknownUser Во-первых, я сделал несколько опечаток, это должны быть круглые скобки вроде () , а не жесткие скобки [] , и после getTime должен быть также () . Метод .indexOf (а также метод JQuery из основного поста) просматривает массив для записи, которая равна ( === ) значению, которое вы передаете ( d.getTime ). Если он находит совпадение, он возвращает индекс первого совпадения, который будет числом 0 или больше. Если совпадение не найдено, возвращается -1. Таким образом, vacations.indexOf(d.getTime()) > -1 возвращает значение true если в массиве vacations содержится соответствие для d.getTime() .
AmeliaBR 22 фев. 2014, в 15:24
1

Я должен отметить, что он работает только потому, что массив Vacations был изменен и содержит значения меток времени, которые будут соответствовать результатам getTime() . Код @ FernOfTheAndes делает это в исходном массиве данных, но вы также можете использовать функцию карты: var vacationsAsTimestamp = vacations.map(function(dateString){ return new Date(dateString).getTime();} ); Живая версия
AmeliaBR 22 фев. 2014, в 15:30
0

Большое спасибо @AmeliaBR.
Unknown User 24 фев. 2014, в 03:52

Показать ещё 6 комментариев

Unknown User · Answer 2 · 2014-02-20T06-48-00.000Z

Здесь Fiddle.

Проблема была в этом коде около переменной days.

var days = chart.selectAll(".day")
    .data(function(d) { return d3.time.days(new Date(date.start), new Date(date.end)); })
        .enter()
        .append('svg:g')
    .attr('class', 'day');

Раньше это было так.

var days = chart
.selectAll(".day")
    .data(function(d) { return d3.time.days(new Date(date.start), new Date(date.end)); })
        .enter()
        .append('svg:g')
    .attr('class', 'day');

Пожалуйста, проверьте, помогает ли это.

Я не вижу никаких изменений, кроме удаления новой строки в первой строке. Я не решаю основную проблему выделения дат перечисленными переменными vacations