Сохранение элементов как переменных в JQuery

Я довольно новичок в Javascript и JQuery, и у меня возникла проблема с тем, что, по моему мнению, было бы простым. Я создаю сайт, состоящий из одной html-страницы, таблицы стилей CSS и файла Javascript, который извлекает данные откуда-то и рисует сеть, используя d3.js. У меня есть элемент SVG в моем html, который мне нужен для доступа из Javascript, чтобы изменить его атрибуты и нарисовать его. Я изначально создавал элемент SVG в своем JQuery и сохранял возвращаемое значение как переменную, которую я мог бы использовать позже. Однако это было отвратительно, потому что мне приходилось удалять и повторно добавлять SVG каждый раз, когда я хотел создать новую сеть.Сохранение элементов как переменных в JQuery

Итак, теперь я добавил элемент SVG прямо к html и получил макет, который отлично работает с изменением размера окна. Тем не менее, я не могу получить доступ к нему так же легко из JQuery. Я пытался что-то вроде этого:

var svg = document.getElementById("svg"); 
svg.attr("viewBox", "0 0 " + w + " " + h) 
      .attr("preserveAspectRatio", "XMidYMid") 
      .attr("width", w) 
      .attr("height", h);

Однако в svg.attr(...), я получаю ошибку «TypeError: 'неопределенные' не является функцией (оценка«svg.attr ("Viewbox", "0 0" + ш + "" + h) ') ".

Я также пробовал использовать $("#svg") в любом месте, где я использовал переменную svg. Однако это дало мне ошибку «TypeError:« undefined »не является функцией (оценивая« $ («# svg»). Append («svg: defs»). SelectAll («marker») ') ». Как ни странно, перед вызовом функции,

$("#svg").attr("viewBox", "0 0 " + w + " " + h) 
     .attr("preserveAspectRatio", "XMidYMid") 
     .attr("width", w) 
     .attr("height", h);

... побежал просто отлично.

Я не уверен, что я запутываю синтаксис d3 с синтаксисом JQuery и Javascript, но мне кажется, что это простая проблема сохранения элемента html в переменной Javascript. Это нормальная вещь? Если да, то какой правильный синтаксис? Если нет, что я должен делать вместо этого?

источник

2013-06-07 FrancesKR

Вы не можете слепо смешать D3 с jQuery. Когда вы вызываете '$ (" # svg "). Append (" svg: defs ")', то вы возвращаете объект jQuery. Объекты jQuery не имеют метода selectAll, это D3.Вы всегда должны думать о том, какой у вас объект, и конвертировать его в другое, если вам нужно. Эквивалентом в D3 будет 'd3.select ('# svg'). Append ('defs'). SelectAll ('marker')' btw. –

_ «Синтаксис JQuery и Javascript» _ - нет никакой разницы в _syntax_ jQuery и JavaScript, поскольку jQuery _is_ JavaScript. То есть, весь код jQuery использует стандартный синтаксис JS. С jQuery или без него вы получите ошибки, если попытаетесь вызвать методы для объектов, которые не указали указанные методы, что и произошло, когда вы пытались использовать '.attr()' (метод объектов jQuery) с 'svg '(а не объект jQuery). – nnnnnn

@FelixKling - Как преобразовать объект jQuery в объект D3? Я не могу найти какую-либо документацию на них или как они отличаются. – FrancesKR

Получил это! Таким образом, здесь было две проблемы ... потому что я не знал, что на самом деле имею дело с тремя видами объектов. Затем я пытался вызвать функции для тех объектов, которые для них не были определены.

1) Как указал Зенит и Сушант, я пытался вызвать функцию jQuery для элемента DOM, возвращаемого getElementById. Чтобы исправить это, я мог либо использовать $("#svg") вместо переменной, чтобы вызвать функцию jQuery, либо я мог бы преобразовать мою переменную элемента DOM в переменную объекта jQuery, выполнив var $svg = ($svg);, а затем ссылаясь на нее как $svg.

2) Как указал Феликс Клинг, я вызывал функцию D3 selectAll на объект jQuery. Чтобы исправить это, мне пришлось заменить $("#svg").append("svg:defs").selectAll(...) на d3.select('#svg').append('defs').selectAll(...)

Спасибо за помощь!

источник

2013-06-07 23:59:41 FrancesKR

Это потому, что attr() является jQuery method, и вы не вызывали его на объект jQuery в первый раз.

источник

2013-06-07 23:28:25 lifetimes

.attr представляет собой метод JQuery

В первом случае элемент является DOM element. Таким образом, attr will fail

var svg = document.getElementById("svg"); 
// svg is s DOM element 
// no support for .attr here unless you convert this to jQuery object 
// $(svg) 

$("#svg") 
// jQuery object

источник

2013-06-07 23:29:25

Сохранение элементов как переменных в JQuery

ответ

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