d3 = require("d3");
drag = (simulation, d) => {
function dragstarted(event) {
if (!event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(event) {
d.fx = event.x;
d.fy = event.y;
}
function dragended(event) {
if (!event.active) simulation.alphaTarget(0);
//d.fx = null;
//d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
nodes = [
{id: 'pin1', fx: 50 - pinRadius, fy: 25, r: pinRadius},
{id: 'pin2', fx: 350 + pinRadius, fy: 25, r: pinRadius},
{id: 'text1', fy: 25, fx: 100, r: textRadius},
{id: 'text2', fy: 25, fx: 150, r: textRadius},
{id: 'dragger1', fx: 50, fy: 50, r: textRadius},
{id: 'dragger2', fx: 100, fy: 50, r: textRadius},
]
links = [
{source: 'text1', target: 'dragger1'},
{source: 'text2', target: 'dragger2'},
]
simulation = d3.forceSimulation(nodes)
//.alphaDecay(0.07) // 0.0228
.force("link", d3.forceLink(links).id(d => d.id).distance(1).strength(0.3))
.force("collide", d3.forceCollide(10).radius(d => d.r).strength(3).iterations(30))
// 最终搬到实际项目时 forceLink 换成了 forceX 来实现，注意起始 fx 不要设置得太接近，不然会弹开
{
const [pin1, pin2, dText1, dText2, dDragger1, dDragger2] = nodes
const dom = html`
<svg class="main-chart" viewBox="0 0 400 100">
<g>
<rect id="bar" width="300" height="1" x="50" y="25" fill="green" />
<circle
id="pin1"
r="${pin1.r}"
cx="${pin1.x}"
cy="${pin1.y}"
fill="rgba(0, 255, 255, 0.3)"
/>
<circle
id="pin2"
r="${pin2.r}"
cx="${pin2.x}"
cy="${pin2.y}"
fill="rgba(0, 255, 255, 0.3)"
/>
<circle id="text1" r="${dText1.r}" cx="${dText1.x}" cy="${dText1.y}" fill="rgba(0, 0, 255, 0.3)" />
<circle id="dragger1" r="${dDragger1.r}" cx="${dDragger1.x}" cy="${dDragger1.y}" fill="rgba(0, 0, 255, 0.5)" />
<circle id="text2" r="${dText2.r}" cx="${dText2.x}" cy="${dText2.y}" fill="rgba(0, 128, 128, 0.3)" />
<circle id="dragger2" r="${dDragger2.r}" cx="${dDragger2.x}" cy="${dDragger2.y}" fill="rgba(0, 128, 128, 0.5)" />
</g>
</svg>`;
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;
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.