2a:null 2b:["$","title",null,{"children":"Comics-tree | Михаил Гуселетов | Observable"}] 30:T6eb,md`# Comics-tree Отображает связи между комиксами/событиями/героями/сериями/историями/создателями (далее элемент) с сайта [marvel.com](https://www.marvel.com) по [API](https://developer.marvel.com) Входные параметры взяты из [схемы](https://gateway.marvel.com/docs/public), ввод и поиск **только на Английском**. Если вы знаете точное название элемента, заполняем name/title (регистрозависимы), иначе **nameStartsWith**/**titleStartsWith** (по начальному куску слова). Остальные параметры заполняются по желанию. Если элемент stories, то придётся вводить ID, допустим в поле event вводим 29. Элементы отображаются в виде дерева. Дерево можно перетаскивать и менять его размер (**пока только в Chrome**). Иконки элементов можно менять в arrEmoji. Подтягивание картинок на четвёртом уровне работает только после выбора элемента. Кнопка ◀ делает элемент основным и перезагружает дерево. **publicKey** и **privateKey** берутся со страницы [My Developer Account](https://developer.marvel.com/account) [Демо сайт](https://xn--c1aehpi7d.xn--p1ai/comics-tree/), [Код на observablehq](https://observablehq.com/@mishgen/comics-tree), [github](https://github.com/amputator84/comics-tree) `31:T4648,{ var uncVar = '' var schVar = '' mutable err = '' var txt = '' // getInpEx Количество заполненных полей ввода // dataScheme Загруженная схема // dataSchemeDemo Демо схема var getInpEx = Array.prototype.slice.call(document.querySelectorAll('.changeArray2')).filter(e => e.value != '').length if (dataScheme.uncover && getInpEx == 0) { uncVar = dataScheme.uncover schVar = dataScheme.scheme txt = 'Загруженная схема' } else { uncVar = dataSchemeDemo.uncover schVar = dataSchemeDemo.scheme txt = 'Демка' } if (!dataScheme.uncover && !dataSchemeDemo.uncover) mutable err = 'Что-то не так с схемами' const jsonAll = uncVar // Генерация выпадашки с сортировкой function selOrderBy(d) { if (arrAll().indexOf(d.data.name) == -1) return var selected = '' var arr = [] var arr2 = arrAll(d.data.name, 1) for (var i = 0; i < arr2.length; i++) { if (arr2[i] == d.data.orderBy) selected = 'selected' else selected = '' arr.push(``) } return arr } //Генерация выпадашки с страницами function selOffset(d) { var arr = [] var begin = d.data.offset var end = d.data.available var j = 0 var selected = '' for (var i = 0; i < end; i = i + 20) { if (i - end < 20 && i - end > 0) j = end else j = parseInt(i + 20) if (i == begin) selected = 'selected' else selected = '' arr.push(``) } return arr } // Клик на элемент + повторная загрузка дерева function click(event, d, type) { mutable uncover = jsonAll // Клик на надпись - перерисовка дерева if (type == 'text') { if (d._children == undefined) { addDelJsonArr(d) var link = (d.data.resourceURI) ? d.data.resourceURI : d.data.id var urlUpd = link.replace('http', 'https') + '?limit=20&' + api d3.json(urlUpd) .then(function(j) { d.data.children = setTypes(j).children d.children = null d._children = [] //пустой, потому что мы не знаем координаты if (j.data.results[0].thumbnail != undefined) { d.data.img = j.data.results[0].thumbnail.path + '.' + j.data.results[0].thumbnail.extension } else { d.data.img = '' } var parData = getParent(d).data root = d3.hierarchy(parData) root.x0 = height / 2 root.y0 = 40 root.children.forEach(function(d) { collapse2(d) }) mutable downloadJson = parData update(root) }) } else { d.children = d.children ? null : d._children update(d) addDelJsonArr(d, 1) mutable downloadJson = getParent(d).data } } // Клик на стрелочку влево if (type == 'left') { var link = '' link = d.data.resourceURI var urlUpd = link.replace('http', 'https') + '?limit=20&' + api d3.json(urlUpd) .then(function(j) { root = d3.hierarchy(setTypes(j), function(d) { return d.children }) root.x0 = height / 2 root.y0 = 40 root.children.forEach(collapse) mutable downloadJson = root.data update(root) }) } // Клик на пагинацию или сортировку if (type == 'offset' || type == 'orderBy') { var orderBy = arrAll(d.data.name)[0] var offset = 0 if (type == 'offset') { offset = event.target.value if (d.data.orderBy != undefined) orderBy = d.data.orderBy } else { orderBy = event.target.value if (d.data.offset != undefined) offset = d.data.offset } addDelJsonArr(d) var link = d.data.resourceURI var urlUpd = link.replace('http', 'https') + '?limit=20&offset=' + offset + '&orderBy=' + orderBy + '&' + api d3.json(urlUpd) .then(function(j) { d.data.children = setTypes(j).children d.children = null d._children = [] //пустой, потому что мы не знаем координаты if (j.data.results[0].thumbnail != undefined) { d.data.img = j.data.results[0].thumbnail.path + '.' + j.data.results[0].thumbnail.extension } // Прокидываем кликнутые параметры в изменённое дерево, чтоб hierarchy не затёр d.data.offset = offset d.data.orderBy = orderBy var parData = getParent(d).data root = d3.hierarchy(parData) root.x0 = height / 2 root.y0 = 40 root.children.forEach(function(d) { collapse2(d) }) mutable downloadJson = parData update(root) }) } } // Получение родителя через замыкание function getParent(d) { if (d.parent != null) d = getParent(d.parent) return d } // Схлопнуть через замыкание function collapse2(dd) { if (dd.children) { dd._children = dd.children dd.children.forEach(function(d) { collapse2(d) }) var nam = dd.data.name if (arrAll().indexOf(dd.data.name) != -1) nam = dd.data.name + dd.parent.data.name if (jsonAll.map(d => d.name).indexOf(nam) == -1) { dd.children = null } else { dd.offset = jsonAll.filter(d => d.name == nam)[0].offset || 0 } } } // Добавление разкрытых связей в массив для отрисовки перезагруженного дерева. Добавление атрибутов напрямую в JSON не получается, потому что JSON каждый раз заново собирается function addDelJsonArr(d, del = 0) { var nam = d.data.name if (arrAll().indexOf(d.data.name) != -1) nam = d.data.name + d.parent.data.name if (del == 1 && d.children == null) { // Удаление jsonAll.map(function(dd, i) { if (dd.name == nam) jsonAll.splice(i, 1) }) } else { jsonAll.push({ 'name': nam, 'offset': d.data.offset }) } } // Добавление нод для элементов, так как по умолчанию их нет в дереве function setTypes(j) { var d = j.data.results if (d.length > 1) { var newD2 = { "name": j.etag, "children": [] } d.forEach(function(di) { var n = '' var dd = [] if (di.title != undefined) n = di.title else n = di.name var types = ['comics', 'events', 'characters', 'series', 'stories', 'creators'] types.forEach(function(e) { if (di[e] != undefined) { if (di[e].available > 0) dd.push({ "name": e, "children": di[e].items, "available": di[e].available, "resourceURI": di.resourceURI + '/' + e }) } }) var img = (di.thumbnail != undefined) ? di.thumbnail.path + '.' + di.thumbnail.extension : '' newD2.children.push({ "name": n, "children": dd, "img": img, "resourceURI": di.resourceURI }) }) } if (d.length == 1) { d = d[0] var n = '' if (d.title != undefined) n = d.title else n = d.name var dd = [] var types = ['comics', 'events', 'characters', 'series', 'stories', 'creators'] types.forEach(function(e) { if (d[e] != undefined) { if (d[e].available > 0) dd.push({ "name": e, "children": d[e].items, "available": d[e].available, "resourceURI": d.resourceURI + '/' + e }) } }) var img = (d.thumbnail != undefined) ? d.thumbnail.path + '.' + d.thumbnail.extension : '' var newD2 = { "name": n, "children": dd, "img": img, "resourceURI": d.resourceURI } } return newD2 } // Рисуем SVG область var svg = d3.select(DOM.svg(width, 200)) .attr('style', 'border: 1px solid green') .attr('id', 'svg') // Размер окна + отступы var margin = { top: 20, right: 90, bottom: 30, left: 90 }, width = 1100 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; var s = svg.attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) var g = s.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") // Zoom svg.call(d3.zoom().on("zoom", ({ transform }) => g.attr("transform", transform))) var i = 0, duration = 500, // Скорость разворота связей root var treemap = d3.tree().size([height, width]); // Тянем схему с загруженного файла или демки, иначе с url если заполнен хоть один параметр if (schVar && getInpEx == 0) { root = d3.hierarchy(schVar) root.x0 = height / 2 root.y0 = 40 root.children.forEach(collapse2) update(root, txt) } else { d3.json(url) .then(function(j) { if (j.data.results.length == 0) return false root = d3.hierarchy(setTypes(j), function(d) { return d.children }) root.x0 = height / 2 root.y0 = 40 root.children.forEach(collapse) update(root, 'Динамика') }) .catch(function(error) { mutable err = error root = d3.hierarchy(schVar) root.x0 = height / 2 root.y0 = 40 root.children.forEach(collapse2) if (publicKey == '') txt = txt + ' publicKey пуст' if (privateKey == '') txt = txt + ' privateKey пуст' update(root, txt) }) } function collapse(d) { if (d.children) { d._children = d.children d._children.forEach(collapse) d.children = null } } // Отрисовка дерева, добавление нод(точек) и связей(линий). // Также пагинация, сортировка, ◀ function update(source, txt = '') { var treeData = treemap(root) var nodes = treeData.descendants() var links = treeData.descendants().slice(1) nodes.forEach(function(d) { d.y = d.depth * 150 // Длина между связями. depth = уровень столбца слева направо }) g.append('text') .attr("x", "10") .attr("y", "10") .text(txt) var node = g.selectAll('g.node') .data(nodes, function(d) { d.trueName = 'node' return d.id || (d.id = ++i); }); var nodeEnter = node.enter().append('g') .attr('class', 'node') .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")" }) nodeEnter.append('text') .attr("dy", ".35em") .attr("x", function(d) { return arrAll().indexOf(d.data.name) != -1 ? 0 : 15 }) .style("font-size", function(d) { if (arrAll().indexOf(d.data.name) != -1) { return "20px" } }) .attr("text-anchor", function(d) { return "start" }) .text(function(d) { var ret = d.data.name if (arrAll().indexOf(d.data.name) != -1) { ret = arrEmoji[arrAll().findIndex(e => e == d.data.name)] //+d.offset //arrEmoji[d.data.name] } return ret }) .style('cursor', 'pointer') .on('click', (e, d) => click(e, d, 'text')) nodeEnter.append('text') .attr('x', -40) .attr('y', 8) .text('◀') .style('cursor', 'pointer') .style('font-size', '20px') .on('click', (e, d) => click(e, d, 'left')) /* offset */ nodeEnter.append('foreignObject') .attr('width', '40') .attr('height', '100') .attr('x', -20) .attr('y', 10) .append("xhtml:select") .html(function(d) { return `${selOffset(d)}` }) .style('display', (d) => { if (arrAll().indexOf(d.data.name) == -1 || d.data.available < 21) { return 'none' } }) .on("change", (e, d) => click(e, d, 'offset')) /* orderBy */ nodeEnter.append('foreignObject') .attr('width', '30') .attr('height', '100') .attr('x', -60) .attr('y', 10) .append("xhtml:select") .html(function(d) { return `${selOrderBy(d)}` }) .style('display', (d) => { if (arrAll().indexOf(d.data.name) == -1) { return 'none' } }) .on("change", (e, d) => click(e, d, 'orderBy')) var nodeUpdate = nodeEnter.merge(node) nodeUpdate.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); // Картинка nodeUpdate.append("svg:image") .attr("xlink:href", function(d) { return d.data.img }) .attr("x", function(d) { return -25; }) .attr("y", function(d) { return -25; }) .attr("height", 40) .attr("width", 30); // удаление элементов после сворачивания var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); // Связи var link = g.selectAll('path.link') .data(links, function(d) { return d.id; }); var linkEnter = link.enter().insert('path', "g") .attr("class", "link") .attr('d', function(d) { var o = { x: source.x0, y: source.y0 } return diagonal(o, o) }); var linkUpdate = linkEnter.merge(link); linkUpdate.transition() .duration(duration) .attr('d', function(d) { return diagonal(d, d.parent) }); var linkExit = link.exit().transition() .duration(duration) .attr('d', function(d) { var o = { x: source.x, y: source.y } return diagonal(o, o) }) .remove(); // Все линии выходят из одной точки nodes.forEach(function(d) { d.x0 = d.x; d.y0 = d.y; }); function diagonal(s, d) { var path = `M ${s.y} ${s.x} C ${(s.y + d.y) / 2} ${s.x}, ${(s.y + d.y) / 2} ${d.x}, ${d.y} ${d.x}` return path } } //Возвращаем ноды в SVG return svg.node(); }32:[{"id":"4910dc081234fe6dea2d9f8af3961e804512c99052f8c8fe2ba072a1094d773a802d4261b74555dc1a6339ecf53f867856d83acfe31f79de117a4d93beffd21e","href":"https://static.observableusercontent.com/files/4910dc081234fe6dea2d9f8af3961e804512c99052f8c8fe2ba072a1094d773a802d4261b74555dc1a6339ecf53f867856d83acfe31f79de117a4d93beffd21e","name":"scheme@2.json","type":"application/json","lastModified":1655357526046.693,"size":339469}] 2e:{"id":"4076fd8f2dda29aa","slug":"comics-tree","title":"Comics-tree","thumbnail":"12d577e5ff73bc84c13cc4affb683bbd6ff0b44c76ff6bea3ea02f5bf6f0fc61","access_level":"public","create_time":"$D2021-12-06T04:23:27.802Z","update_time":"$D2022-06-20T02:59:16.324Z","view_time":null,"first_public_time":"$D2022-06-16T06:20:58.774Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7c500fd7148f4e6a","login":"mishgen","name":"Михаил Гуселетов","avatar_url":"https://avatars-next.observableusercontent.com/6820884a0ed3bb435a770b24808f298cff4558be542b0122d1de831f4ab6c246","tier":"starter_2024"},"version":607,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4d6999cbe2d2effd","login":"mishgen","name":"Михаил Гуселетов","avatar_url":"https://avatars-next.observableusercontent.com/6820884a0ed3bb435a770b24808f298cff4558be542b0122d1de831f4ab6c246","tier":null}],"members":[{"type":"individual","id":"4d6999cbe2d2effd","login":"mishgen","name":"Михаил Гуселетов","avatar_url":"https://avatars-next.observableusercontent.com/6820884a0ed3bb435a770b24808f298cff4558be542b0122d1de831f4ab6c246","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c4c6ceeafaa1e321","slug":"trees","title":"Trees","owner":{"id":"7c500fd7148f4e6a","login":"mishgen","name":"Михаил Гуселетов"}},"type":"notebook","body":{"titling":"auto","title":"Comics-tree","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// Выбор элемента\nviewof selHtmlNew = Select(arrModelGroup,{label:'Выбери элемент'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"// Фильтрация полей элемента\nviewof inputsNew = {\n var arr = [html `Выбери параметр:
`]\n var regex = /\\/v1\\/public\\//\n var valueDefault = ''\n d3.map(arrModel.apis, function(d) {\n var type = d.path.replace(regex, '')\n if (type.indexOf('/') == -1) {\n if (selHtmlNew[0].path.replace(regex, '') == type) {\n var param = d.operations[0].parameters\n for (var key in param) {\n // Значение по умолчанию для наглядного примера. Если не нужен, закомментировать.\n //if (param[key].name == 'nameStartsWith' && type == 'characters') valueDefault = 'Guardians of the'\n //else valueDefault = ''\n arr.push(html ``)\n }\n }\n } else {\n return false\n }\n return arr\n })\n return form(html``)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"**err** - Показывает ошибки соединения с marvel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":202,"value":"mutable err = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"**Скачать схему на комп** - скачивает схему связей в файл _scheme.json_. Формат _JSON_, состоит из двух частей:\n_scheme_ - все доступные надписи и картинки\n_uncover_ - открытые связи. Если нажали на иконку, формат ключа = ЭЛЕМЕНТ+ИМЯ, например _comicsNova_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"//DOM.download(new Blob([JSON.stringify(downloadJson)], {type: \"application/json\"}), 'scheme.json', \"Скачать схему\")\nDOM.download(new Blob([JSON.stringify({'scheme': downloadJson,'uncover': uncover})], {type: \"application/json\"}), 'scheme.json', \"Скачать схему на комп\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"**Загрузить схему с компа** - загружает JSON схему с компьютера сюда","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"viewof inputFile2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"**publicKey** - регистририруемся в [marvel.com](https://www.marvel.com/), переходим в [My Developer Account](https://developer.marvel.com/account), копируем \"Your public key\" в поле **publicKey**.\n\n**privateKey** - по аналогии с **publicKey** берём из \"Your private key\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":353,"value":"viewof publicKey = Text({label: html`publicKey`, placeholder: \"Введи publicKey\", value: \"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"viewof privateKey = Text({label: html`privateKey`, placeholder: \"Введи privateKey\", value:\"\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"**dataSchemeDemo** - Демо схема из прикреплённого файла. Отображается, когда нет данных из сети или пустые поля поиска. Без заполненных privateKey и publicKey не работают новые связи.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"mutable dataSchemeDemo = FileAttachment(\"scheme@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"**downloadJson** - Схема отображаемого дерева, подтянутая из сети со всеми связями. Начинается с самого первого (левого) элемента. Так как mutable, обновляется динамически. Для кнопки \"Скачать схему на комп\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"mutable downloadJson = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"**arrModel** - распарсенная модель API с [gateway.marvel.com/docs/public](https://gateway.marvel.com/docs/public) для работы с параметрами. Мог сделать статику, но параметры иногда меняются, так что оставил динамику.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"// Модель API\narrModel = d3.json('https://gateway.marvel.com/docs/public')\n .then(function(j) { return j})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"**arrModelGroup** - Сгруппированная **arrModel** для выпадашки с элементами.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"// Модель API, сгруппированная до типов через регулярки\narrModelGroup = d3.group(arrModel.apis, d => d.path.replace(/\\/v1\\/public\\//, '').replace(/\\/{.*/, ''))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"**arrAll** - Список из **arrModel** для **orderBy**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"// Список полей для сортировки при введённом элементе (type). Иначе список всех элементов\nfunction arrAll(type='') {\n var arr = d3.map(arrModel.apis,e=>e)\n var arr2 = new Array()\n var t = ''\n var t2 = ''\n for (var i = 0; i < arr.length; i++) {\n if (arr[i].path.indexOf('{') == -1) {\n t2 = arr[i].path.replace(/\\/v1\\/public\\//, '')\n if (type == t2) {\n t = arr[i].operations[0].parameters\n } else {\n arr2.push(t2)\n }\n }\n }\n if (type != '') {\n return t.filter(d=>d.name=='orderBy')[0].allowableValues.values\n } else return arr2\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"**arrEmoji** - Иконки Emoji (не картинкой) для элементов _characters/comics/creators/events/series/stories_. Можно вставлять свои, но не все иконки кроссбраузерны.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"//characters/comics/creators/events/series/stories\narrEmoji = new Array('🦸‍♂️', '🗯️', '🧙', '🗺️', '🍿', '📚')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"**dataScheme** - Загруженная схема по кнопке \"Загрузить схему с компа\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"mutable dataScheme = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"**uncover** - Открытые связи, собирающиеся динамически для кнопки \"Скачать схему на комп\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"mutable uncover = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"**readFile** - Скрытая функция чтения файла для скрытой кнопки \"inputFile\", которая вызывается с кнопки \"Загрузить схему с компа\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"// readFile + parse. Чтение файла и парсинг в dataScheme\n{\n function readFile(event){\n const inputElement = event.target;\n const inputFile = inputElement.files[0];\n var reader = new FileReader();\n reader.onload = function(loadedEvent) {\n const parsedResult = JSON.parse(loadedEvent.target.result);\n mutable dataScheme = parsedResult;\n // Стереть все поля ввода если подтянули схему\n Array.prototype.slice.call(document.querySelectorAll('.changeArray2')).filter(e => e.value = '')\n }\n reader.readAsText(inputFile);\n }\n return window.readFile = readFile;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"**import** - \"@observablehq/inputs\" и \"@mbostock/form-input\" - Импортированы для удобного отображения HTML элементов.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table, bind} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"**api** - Используется для основной ссылки, а также для динамического переключения страниц. \"_Your rate limit: 3000 calls/day_\" - можно использовать только 3000 вызовов API в день. Правила сбора в [developer.marvel.com/documentation/authorization](https://developer.marvel.com/documentation/authorization).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"api = {\n // Используется для основной ссылки, а также для динамического переключения страниц\n // apikey = public = publicKey\n // hash = md5(ts+privateKey+publicKey)\n var ts = new Date().getTime()\n var hash = md5.hash(ts+privateKey+publicKey)\n return `&ts=${ts}&apikey=${publicKey}&hash=${hash}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"**url** - Полный адрес с hash и параметрами. Для вызова схемы по API.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"url = {\n // Собираем URL по кусочкам, чтоб добыть JSON\n var url = ''\n for (var key in inputsNew) {\n if (inputsNew[key] != '') url = url + '&' + key + '=' + inputsNew[key]\n }\n url = `https://gateway.marvel.com/v1/public/` + selHtmlNew[0].path.replace(/\\/v1\\/public\\//, '') + `?` + url + api\n return url\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"**md5** - Функция сбора md5. Выбирал из нескольких, остановился на рабочей схеме [spark-md5](https://observablehq.com/@tmcw/hacking-hashes-an-exploration-of-the-nyc-taxi-data-issue).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"md5 = require('spark-md5') // Взял отсюда https://observablehq.com/@tmcw/hacking-hashes-an-exploration-of-the-nyc-taxi-data-issue","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"viewof inputFile = html`Скрытая кнопка загрузки схемы. Откровенный костыль Ý`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"**d3** - Сам мотор d3.js 6 версии.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"**style** - стили для красивой отрисовки HTML элементов дерева.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"//TODO\n// Mozilla + zoom + drag\n// Убрать лишний клик после первой загрузки схемы\n// Стили для offset и orderBy","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"