2a:null 2b:["$","title",null,{"children":"d3-force 避免横向堆叠柱图文本标记重叠方案尝试 | Bruce He | Observable"}] 30:T6cb,{ const [pin1, pin2, dText1, dText2, dDragger1, dDragger2] = nodes const dom = html` `; const bar = dom.querySelector('#bar') const text1 = dom.querySelector('#text1') const dragger1 = dom.querySelector('#dragger1') const text2 = dom.querySelector('#text2') const dragger2 = dom.querySelector('#dragger2') drag(simulation, dDragger1)(d3.select(dragger1)); drag(simulation, dDragger2)(d3.select(dragger2)); dText1.fx = null dText2.fx = null while (true) { dragger1.setAttribute('cx', dDragger1.x) dragger1.setAttribute('cy', dDragger1.y) text1.setAttribute('cx', dText1.x) text1.setAttribute('cy', dText1.y) dragger2.setAttribute('cx', dDragger2.x) dragger2.setAttribute('cy', dDragger2.y) text2.setAttribute('cx', dText2.x) text2.setAttribute('cy', dText2.y) //yield Promises.delay(3000) yield dom; } }31:[] 2e:{"id":"f2654f54a720fc13","slug":"d3-force-demo","title":"d3-force 避免横向堆叠柱图文本标记重叠方案尝试","thumbnail":"7c8e0ca88cbf244787d1845695c33d7c6f4162faa78650b8786497bf0dc86ce8","access_level":"public","create_time":"$D2020-10-27T06:29:46.491Z","update_time":"$D2020-11-09T14:37:01.552Z","view_time":null,"first_public_time":"$D2020-12-29T00:28:20.478Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5e3282f592b2837f","login":"heganjie","name":"Bruce He","avatar_url":"https://avatars-next.observableusercontent.com/58d33228761b95f76b498c59d4664893e0c8b694acb62ff0342f8d22ebafb8e3","tier":"starter_2024"},"version":421,"publish_version":421,"role":null,"authored":false,"authors":[{"type":"individual","id":"8bc3b438d4504c1b","login":"heganjie","name":"Bruce He","avatar_url":"https://avatars-next.observableusercontent.com/58d33228761b95f76b498c59d4664893e0c8b694acb62ff0342f8d22ebafb8e3","tier":null}],"members":[{"type":"individual","id":"8bc3b438d4504c1b","login":"heganjie","name":"Bruce He","avatar_url":"https://avatars-next.observableusercontent.com/58d33228761b95f76b498c59d4664893e0c8b694acb62ff0342f8d22ebafb8e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"40d740bf395b0cdf","slug":"untitled","title":"algorithm","owner":{"id":"5e3282f592b2837f","login":"heganjie","name":"Bruce He"}},"type":"notebook","body":{"titling":"auto","title":"d3-force 避免横向堆叠柱图文本标记重叠方案尝试","cells":[{"id":0,"value":"md`# d3-force 避免横向堆叠柱图文本标记重叠方案尝试`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"drag = (simulation, d) => {\n \n function dragstarted(event) {\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) {\n d.fx = event.x;\n d.fy = event.y;\n }\n \n function dragended(event) {\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"pinRadius = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"textRadius = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"nodes = [\n {id: 'pin1', fx: 50 - pinRadius, fy: 25, r: pinRadius},\n {id: 'pin2', fx: 350 + pinRadius, fy: 25, r: pinRadius},\n {id: 'text1', fy: 25, fx: 100, r: textRadius}, \n {id: 'text2', fy: 25, fx: 150, r: textRadius},\n {id: 'dragger1', fx: 50, fy: 50, r: textRadius},\n {id: 'dragger2', fx: 100, fy: 50, r: textRadius},\n ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"links = [\n {source: 'text1', target: 'dragger1'},\n {source: 'text2', target: 'dragger2'},\n ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"simulation = d3.forceSimulation(nodes)\n //.alphaDecay(0.07) // 0.0228\n .force(\"link\", d3.forceLink(links).id(d => d.id).distance(1).strength(0.3))\n .force(\"collide\", d3.forceCollide(10).radius(d => d.r).strength(3).iterations(30))\n\n // 最终搬到实际项目时 forceLink 换成了 forceX 来实现，注意起始 fx 不要设置得太接近，不然会弹开\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"