Public
Edited
Mar 9, 2023
frame.node()
//viewof dragcontrol=Inputs.text({value:'bar'})
dragcontrol=[]
control={return {x:500,y:20}}
function drag(d){
function dragstarted(event, d) {
console.log('drag started,',d)
dragcontrol[0]=d
d3.select(this).attr("stroke", "black");
}
function dragged(event) {
console.log('draging,',event,this)
const [x1, y1] = d3.pointer(event);
d3.select(this).raise().attr('transform',`translate(${control.x+=event.dx},${control.y+=event.dy})`)//.attr("x",control.x+=event.dx).attr("y", control.y+=event.dy);
}
function dragended(event, d) {
d3.select(this).attr("stroke", null);
}
const drag = d3
.drag()
.on("start", e=>dragstarted(e,d))
.on("drag", dragged)
.on("end", dragended);
return drag
}
frame={
const frame=htl.html`<svg id='plot' width=600 height=400 style='border:1px solid red;'/><br>
<span style='border:3px solid blue;width:200px' id='adiv' draggable="true" >Drag to Plot Line</span>
<span style='border:3px solid blue;width:200px' id='bdiv' draggable="true" >Drag to Plot Bar</span>`
let svg=d3.select(frame).select('#plot')
svg.attr("viewBox", [0, 0, 600,400])
svg.append('g').append('rect')
.attr('width',20)
.attr('height',20)
.style('fill','#ccc')
.attr('x',control.x)
.attr('y',control.y)
.call(drag('rect'));
return d3.select(frame)
}
{
const dragEl =frame.select("#bdiv").node()// document.querySelector('#adiv');
function dragstartHandler(event,data) {
dragcontrol[0]=data
event.dataTransfer.setData("text/plain", data);
event.dataTransfer.dropEffect = "move";
}
dragEl.addEventListener('dragstart',e=> dragstartHandler(e,'bar'));
function dragoverHandler(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}
function dropHandler(event,type) {
console.log('b',event,type)
if (dragcontrol[0]!=='bar')return;
const [x,y]=[event.offsetX,event.offsetY]
const data = event.dataTransfer.getData("text/plain");
const plot=Plot.plot({
width:200,
height:200,
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
//frame.node().querySelector("#plot").append('g').attr('transform',`translate(${x},${y})`).append(plot)
d3.selectAll("#newplot0").remove()
d3.select("#plot").append('g').attr('id','newplot0').attr('transform',`translate(${x},${y})`)
// d3.select("#plot >g").append('rect').attr('width','200px').attr('height','200px').attr('id','fig').attr('stroke','black').attr('fill','none').style('z-index',0)
//d3.select('#newplot').call(drag)
//.attr('transform',`translate(${x},${y})`)
frame.node().querySelector("#newplot0").append(plot)
// d3.select("#newplot").call(d3.zoom()
// .extent([[0, 0], [plot.width, plot.height]])
// .scaleExtent([1, 8])
// .on("zoom", zoomed));
d3.select('#newplot0').call(drag('bar'))
//event.preventDefault();
}
// function zoomed(e){
// console.log('zoom',e)
// d3.select('#newplot0').attr("transform", `translate(${e.sourceEvent.offsetX},${e.offsetY})`);
// }
const targetEl = frame.node();
targetEl.addEventListener('dragover', dragoverHandler);
targetEl.addEventListener('drop', (e)=>dropHandler(e,'bar'));
}
{
//line
const dragEl =frame.select("#adiv").node()// document.querySelector('#adiv');
function dragstartHandler(event,data) {
dragcontrol[0]=data
event.dataTransfer.setData("text/plain", event.target.className);
event.dataTransfer.dropEffect = "move";
}
dragEl.addEventListener('dragstart', e=>dragstartHandler(e,'line'));
function dragoverHandler(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}
function dropHandler(event,type) {
console.log('a',event,type)
if (dragcontrol[0]!=='line')return;
const [x,y]=[event.offsetX,event.offsetY]
const data = event.dataTransfer.getData("text/plain");
const plot=Plot.plot({
width:200,
height:200,
marks: [
Plot.ruleY([0]),
Plot.lineY(aapl, {x: "Date", y: "Close"})
]
})
plot.id='line0'
//frame.node().querySelector("#plot").append('g').attr('transform',`translate(${x},${y})`).append(plot)
d3.selectAll("#newplota").remove()
d3.select("#plot").append('g').attr('id','newplota').attr('transform',`translate(${x},${y})`)
// d3.select("#plot >g").append('rect').attr('width','200px').attr('height','200px').attr('id','fig').attr('stroke','black').attr('fill','none').style('z-index',0)
//d3.select('#newplot').call(drag)
//.attr('transform',`translate(${x},${y})`)
frame.node().querySelector("#newplota").append(plot)
// d3.select("#newplot").call(d3.zoom()
// .extent([[0, 0], [plot.width, plot.height]])
// .scaleExtent([1, 8])
// .on("zoom", zoomed));
d3.select('#newplota').call(drag('line'))
//event.preventDefault();
}
function zoomed(e){
console.log('zoom',e)
d3.select('#newplota').attr("transform", `translate(${e.sourceEvent.offsetX},${e.offsetY})`);
}
const targetEl = frame.node();
targetEl.addEventListener('dragover', dragoverHandler);
targetEl.addEventListener('drop', (e)=>dropHandler(e,'line'));
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
