3e:null 3f:["$","title",null,{"children":"npm | zq | Observable"}] 45:T725,{ let height = 600; let r = 20; let forceCollide = 40; const simulation = d3.forceSimulation() .force("charge", d3.forceManyBody()) .force("link", d3.forceLink().id(d => d.id)) .force('collide', d3.forceCollide(d=>forceCollide))//力大小 .force("x", d3.forceX()) .force("y", d3.forceY()) .on("tick", ticked); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); let link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line"); let node = svg.append("g") .attr("stroke", "#fff0") .attr("stroke-width", 1.5) .attr("fill","#0003") .selectAll("g"); function ticked() { node.attr("transform",d=>"translate("+d.x+","+d.y+")") //node.attr("cx", d => d.x) //.attr("cy", d => d.y); link.attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); } invalidation.then(() => simulation.stop()); const old = new Map(node.data().map(d => [d.id, d])); let links = datas.links; let nodes = datas.nodes; node = node .data(nodes, d => d.id) .join(enter => enter.append("g") //.attr("r",r) .call(drag(simulation)) .call(node => node.append("title").text(d => d.id)) .call(node => node.append("text") .text(d => d.id) .attr("stroke", "#000") ) .call(node => node.append("circle").attr("r",r)) ); link = link .data(links, d => [d.source, d.target]) .join("line"); simulation.nodes(nodes); simulation.force("link").links(links); simulation.alpha(1).restart().tick(); ticked(); // render now! return svg.node(); }46:[] 43:{"id":"34d32d1d2eafacef","slug":null,"title":"npm","thumbnail":"da8935fc497053e6ec08323ab93e804ef6d7c5ad5d9440819a2519dff938f828","access_level":"public","create_time":"$D2021-01-20T02:19:42.407Z","update_time":"$D2024-01-04T02:41:52.958Z","view_time":null,"first_public_time":"$D2024-01-04T02:36:04.803Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"84303fb81ad17f31","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":"starter_2024","bio":"","following":false},"version":677,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3819cd2f05e5bb86","login":"zqzyz","name":"zq","avatar_url":"https://avatars-next.observableusercontent.com/b4e38394f64610ba0c3c85d4d3b451b11e900c8edd5b345810971fe512a55b10","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"npm","cells":[{"id":0,"value":"# npm","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"d = fetch('https://registry.npmmirror.com/').then(d=>d.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"datas = {\n let nodes = [];\n let links = [];\n list.forEach(name=>{\n let des = getDependencies(getVersionData(packageCaches[name]));\n let lnk = des\n if(!nodes.find(n=>n.name===name)){\n nodes.push({id:name,name:name});\n }\n \n des.forEach(n=>{\n nodes.push({id:n,name:n});\n links.push({\n source:name,\n target:n\n })\n })\n })\n return {\n nodes:nodes,\n links:links\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"drag = simulation => {\n \n function dragstarted(event, d) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(event, d) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event, d) {\n if (!event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"html`

${error?`${name}:${error}`:\"\"}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"queryDependencies(\"@babel/core\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"UIListItem=({\n props:{\n \n },\n data(){\n return {}\n },\n template:`\n <>\n `\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"app = ({\n template:`\n

\n
{{root.name}}
\n
- {{package.name}}
\n

无

`,\n data(){\n return {\n defaultName:defaultName,\n root:{\n name:\"222\",\n dependencies:[\n {name:\"333\"}\n ]\n },\n packages:[]\n }\n },\n created(){\n this.view(this.defaultName)\n },\n methods:{\n view(name){\n this.root.name = name;\n queryDependencies(name).then(des=>this.root.dependencies = des);\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof registry = DOM.select([\n \"https://registry.npmmirror.com/\",\n \"https://registry.npmjs.org/\",\n \"https://registry.yarnpkg.com/\",\n \"http://r.cnpmjs.org/\",\n \"https://registry.nodejitsu.com/\",\n \"https://skimdb.npmjs.com/registry/\"\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"viewof name = input(defaultName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof current = DOM.select(versionList.map(item=>item==packageData[\"dist-tags\"].latest?item+\"(latest)\":item))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"button(\"Load Dependencie Tree\",function(){\n loadDependencieTree(name).then(d=>{\n mutable dependencieTree = d;\n })\n mutable dependencieTree = {}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"mutable dependencieTree = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"\nfunction loadDependencieTree(name,version,hasDev=false){\n return queryVersionData(name,version).then(d=>{\n let rev = {\n name: d.name,\n version: d.version,\n description: d.description\n }\n if(d.dependencies){\n console.log(`${name}:有依赖`);\n let dependencies = Object.keys(versionData.dependencies);\n if(dependencies.length==0){return Promise.resolve(rev)}\n return new Promise(resolve=>setTimeout(resolve,1000))\n .then(e=>Promise.all(dependencies.map(name=>loadDependencieTree(name)))\n .then(ds=>{\n rev.dependencies = ds\n return rev;\n }))\n }\n console.log(`${name}:无依赖`);\n return Promise.resolve(rev);\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`### 依赖`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"versionData.dependencies?buttons(Object.keys(versionData.dependencies),name=>view(name)):html`无`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`### 开发依赖`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"versionData.devDependencies?buttons(Object.keys(versionData.devDependencies),name=>view(name)):html`无`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`### 浏览记录`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"buttons(list,v=>view(v))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"function view(name){\n viewof name.update(name);\n history.add(name)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"mutable list = [defaultName]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"history = ({\n add(name){\n if(list.indexOf(name)>-1){return}\n list.push(name)\n mutable list = mutable list;\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"button(\"add history\",v=>{\n history.push(name);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"`${registry}${name}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"defaultName=\"@babel/core\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"mutable error=\"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"versionList = Object.keys(packageData.versions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"packageData = query(name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"selectVersion = versionList[viewof current.selectedIndex]?versionList[viewof current.selectedIndex]:{}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"versionData = queryVersionData(name,selectVersion)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"mutable packageCaches=({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"cache = ({\n add(name,data){\n mutable packageCaches[name]=data;\n mutable packageCaches = mutable packageCaches;\n },\n find(name){\n return mutable packageCaches[name]\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"function query(name){\n try{\n return Promise.resolve(cache.find(name) || fetch(`${registry}${name}`)\n .then(d=>d.json()).then(d=>{\n if(d.error){\n mutable error=d.error;\n return {versions:{}}\n }\n cache.add(name,d);\n mutable error=\"\";\n return d;\n }))\n }catch(ex){\n mutable error = ex.message;\n return Promise.resolve({})\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"function queryVersionData(name,version){\n return query(name).then(getVersionData)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"function queryDependencies(name,version){\n return queryVersionData(name,version).then(d=>{\n return Promise.all(getDependencies(d).map(n=>queryVersionData(n).then(d=>({\n name: d.name, \n version: d.version, \n description: d.description,\n dependencies:d.dependencies && Object.keys(d.dependencies) || []\n }))))\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"function getVersionData(d,version){\n version = version || d[\"dist-tags\"].latest\n return d.versions[version]||{};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"function getDependencies(d){\n if(d.dependencies){\n return Object.keys(d.dependencies);\n }\n return []\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"mutable thing = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`#### input`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"viewof testinput = input(333)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"testinput","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"button(\"update\",v=>viewof testinput.update(Date.now()))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"input = function(value){\n let inp = html``;\n inp.value = value;\n let wrapper = html`${inp}`\n wrapper.value = value;\n wrapper.update=v=>{\n inp.value=v\n wrapper.value =v\n wrapper.dispatchEvent(new CustomEvent(\"input\", { bubbles: true }));\n };\n inp.addEventListener(\"input\",e=>{\n wrapper.value=inp.value\n })\n return wrapper;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"function button(name,cb){\n let btn = html``\n btn.addEventListener(\"click\",()=>cb(name))\n return btn\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"function buttons(names,cb){\n return html`${names.map(item=>button(item,cb))}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"ObservablehqRuntime = require(\"@observablehq/runtime\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Runtime = ObservablehqRuntime.Runtime","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"Library = ObservablehqRuntime.Library","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"Inspector = ObservablehqRuntime.Inspector","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"Vue = require(\"vue@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"