2016-08-02 3 views
0

У меня возникли проблемы с пониманием того, почему приведенный ниже код не работает для меня.шкала оси y undefined в пределах анонимной функции

ПРИМЕЧАНИЕ: Я использую D3 v4.

// DATA JOIN 
var dataJoin = vis.svg.selectAll(".group") 
    .data(vis.displayData); 

// ENTER + UPDATE 
var group = dataJoin.enter().append("g") 
    .attr("class", "group"); 

group.append("path") // ENTER 
    .attr("class", "line") 
    .style("opacity", 0.5) 
    .merge(group) // ENTER + UPDATE 
    .transition() 
    .duration(800) 
    .attr("d", function(d) { 
     return vis.y(d.beginDate); <------- vis.y() is undefined 
    }); 

Для каждого элемента в displayData Я хотел бы создать отдельный пользовательский элемент пути (то есть, пользовательские формы), которые расположены вдоль оси у. Каждый элемент пути должен использовать шкалу vis.y(), чтобы я мог разместить элемент пути в соответствующей точке вдоль оси y.

HOWEVER, vis.y() не определено внутри вызова функции .attr. Почему? Я построил другую визуализацию D3 (хотя, они использовали версию 3), и использовал масштаб внутри вызова функции .attr, так почему это проблема сейчас?

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

Он использует следующую шкалу:

vis.y = d3.scaleTime() 
    .range([vis.height, 0]); 

vis.y.domain([ 
    d3.min(vis.displayData, function(d) { return d.beginDate; }), 
    d3.max(vis.displayData, function(d) { return d.endDate; }) 
]); 

Данные массив объектов структурированы, как показано ниже:

var obj = { 
    name: d.Name, 
    type: d.type, 
    beginDate: d.beginDate, 
    endDate: d.endDate, 
    eventDate: d.eventDate 
}; 
+1

Я не могу сказать, почему 'vis.y' не определен потому что у вас недостаточно кода (т. е. как создается vis и в какой области)?Я бы рекомендовал опубликовать полный пример кода, который реплицирует проблему. Тем не менее, я что-то пропустил здесь, 'vis.y' - это масштаб, он не вернет строковый атрибут пути' d'. – Mark

+0

@Mark, вот скрипка: https://jsfiddle.net/Ltjjj5p2/, но я не смог воспроизвести проблему. Если я добавлю все внутри функции d3.json(), то 'vis.y' не определено. Как только я вытаскиваю его за его пределы, он работает. Так что-то заставляет меня думать, что это проблема? – Keven

+0

На самом деле, я думаю, что я нашел преступника, но я до сих пор не знаю, почему это повлияет на него. Мой код завернут внутри 'function loadData() {}'. Когда страница загружается, я вызываю 'loadData();' непосредственно. Когда я удаляю вызов функции и вытаскиваю нагрузку 'd3.json()' за пределами нее 'vis.y', доступен. Почему это? – Keven

ответ

0

я узнал, что происходит, но до сих пор не может объяснить, почему это происходит. Я собираюсь представить два примера, оба примера точно так же, за исключением одной линии:

Vis неопределен

.attr("d", function(d) { 
    return d.beginDate; 
}); 

Vis определяется

.attr("d", function(d) { 
    return vis.y(d.beginDate); 
}); 

Я когда я говорю «определенный» и «неопределенный», когда я перехожу через код, прерываю оператор return, а затем набираю «vis» в консоли, в одном случае возвращается объект, а в другом случае объект не определен.

Когда я объявляю vis.y() в инструкции return перед запуском приложения по какой-либо причине, vis определяется, иначе это не так. Эти скрипты должны показывать как нарушенное, так и рабочее поведение (хотя я не мог поставить точку останова в реальной скрипке, потому что я понятия не имею, где JS живет в представлении «источники». Я запускал их оба локально.). Опять же, единственное различие - одна строка выше.

Сломанный (визави неопределен)

https://jsfiddle.net/jtLp2wzg/

Рабочая (визави определен)

https://jsfiddle.net/39exh1s8/1/

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