Published
Edited
Mar 6, 2018
md`# A Case of MoveOver in D3.js`
data=[{'name':'A','expr':10},
{'name':'B','expr':20},
{'name':'C','expr':10},
{'name':'D','expr':15}]
{
const svg = d3.select(DOM.svg(250,200))
const UpdateCircles = svg.selectAll('rect')
.data(data)
.attr('width',30)
.attr('height',30)
.attr('fill', 'grey')
.attr('x', (d,i)=> i*70)
.attr('y', (d,i)=> 50);
UpdateCircles.enter()
.append('rect')
.attr('width',30)
.attr('height',30)
.attr('fill', 'grey')
.attr('x', (d,i)=> i*70)
.attr('y', (d,i)=> 50)
.on('mouseenter', (d,i,g)=>{
let calculateX = d3.event.layerX - 15;
let calculateY = d3.event.layerY ;
let mousedataLayer = [{x:0,y:0},{x:d3.event.layerX, y:d3.event.layerY}];
let mousedataClient = [{x:0,y:0},{x:d3.event.clientX, y:d3.event.clientY}];
let mousedataXY = [{x:0,y:0},{x:d3.event.X, y:d3.event.Y}];
let mousedataScreen = [{x:0,y:0},{x:d3.event.screenX, y:d3.event.screenY}];
let mousedataPage = [{x:0,y:0},{x:d3.event.pageX, y:d3.event.pageY}];
let mousedataCalculate = [{x:0,y:0},{x:calculateX , y:calculateY}];
let line = d3.line()
.x((d)=> d.x)
.y((d)=> d.y);
console.log(mousedataCalculate);
svg.append('text')
.classed('hover', true)
.text('hi')
.attr('x', d3.event.layerX)
.attr('y', d3.event.layerY);
svg.append('path').datum(mousedataCalculate)
.attr('d', line)
.classed('hover', true)
.attr('stroke', 'black');
console.log('mouseenter!');
})
.on('mouseout', (d,i,g)=>{
svg.select('text.hover').remove();
svg.select('path.hover').remove();
console.log('mouseout!')
console.log(d3.event);
});
return svg.node()
}
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.
