fix vertical line on hover
This commit is contained in:
parent
a8449b08c0
commit
90cb4ba6c8
|
@ -290,7 +290,7 @@ export const drawAxis = ( node, params ) => {
|
||||||
const showTooltip = ( node, params, d ) => {
|
const showTooltip = ( node, params, d ) => {
|
||||||
const chartCoords = node.node().getBoundingClientRect();
|
const chartCoords = node.node().getBoundingClientRect();
|
||||||
let [ xPosition, yPosition ] = d3Mouse( node.node() );
|
let [ xPosition, yPosition ] = d3Mouse( node.node() );
|
||||||
xPosition = xPosition > chartCoords.width - 200 ? xPosition - 200 : xPosition + 20;
|
xPosition = xPosition > chartCoords.width - 340 ? xPosition - 340 : xPosition + 100;
|
||||||
yPosition = yPosition > chartCoords.height - 150 ? yPosition - 200 : yPosition + 20;
|
yPosition = yPosition > chartCoords.height - 150 ? yPosition - 200 : yPosition + 20;
|
||||||
const keys = params.orderedKeys.filter( row => row.visible ).map(
|
const keys = params.orderedKeys.filter( row => row.visible ).map(
|
||||||
row => `
|
row => `
|
||||||
|
@ -346,37 +346,6 @@ const handleMouseOutLineChart = ( d, i, nodes, params ) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const drawLines = ( node, data, params ) => {
|
export const drawLines = ( node, data, params ) => {
|
||||||
const focus = node
|
|
||||||
.append( 'g' )
|
|
||||||
.attr( 'class', 'focusspaces' )
|
|
||||||
.selectAll( '.focus' )
|
|
||||||
.data( params.dateSpaces )
|
|
||||||
.enter()
|
|
||||||
.append( 'g' )
|
|
||||||
.attr( 'class', 'focus' );
|
|
||||||
|
|
||||||
focus
|
|
||||||
.append( 'line' )
|
|
||||||
.attr( 'class', 'focus-grid' )
|
|
||||||
.attr( 'x1', d => params.xLineScale( new Date( d.date ) ) )
|
|
||||||
.attr( 'y1', 0 )
|
|
||||||
.attr( 'x2', d => params.xLineScale( new Date( d.date ) ) )
|
|
||||||
.attr( 'y2', params.height )
|
|
||||||
.attr( 'opacity', '0' );
|
|
||||||
|
|
||||||
focus
|
|
||||||
.append( 'rect' )
|
|
||||||
.attr( 'class', 'focus-g' )
|
|
||||||
.attr( 'x', d => d.start )
|
|
||||||
.attr( 'y', 0 )
|
|
||||||
.attr( 'width', d => d.width )
|
|
||||||
.attr( 'height', params.height )
|
|
||||||
.attr( 'opacity', 0 )
|
|
||||||
.on( 'mouseover', ( d, i, nodes ) =>
|
|
||||||
handleMouseOverLineChart( d, i, nodes, node, data, params )
|
|
||||||
)
|
|
||||||
.on( 'mouseout', ( d, i, nodes ) => handleMouseOutLineChart( d, i, nodes, params ) );
|
|
||||||
|
|
||||||
const series = node
|
const series = node
|
||||||
.append( 'g' )
|
.append( 'g' )
|
||||||
.attr( 'class', 'lines' )
|
.attr( 'class', 'lines' )
|
||||||
|
@ -418,6 +387,37 @@ export const drawLines = ( node, data, params ) => {
|
||||||
handleMouseOverLineChart( d, i, nodes, node, data, params )
|
handleMouseOverLineChart( d, i, nodes, node, data, params )
|
||||||
)
|
)
|
||||||
.on( 'mouseout', ( d, i, nodes ) => handleMouseOutLineChart( d, i, nodes, params ) );
|
.on( 'mouseout', ( d, i, nodes ) => handleMouseOutLineChart( d, i, nodes, params ) );
|
||||||
|
|
||||||
|
const focus = node
|
||||||
|
.append( 'g' )
|
||||||
|
.attr( 'class', 'focusspaces' )
|
||||||
|
.selectAll( '.focus' )
|
||||||
|
.data( params.dateSpaces )
|
||||||
|
.enter()
|
||||||
|
.append( 'g' )
|
||||||
|
.attr( 'class', 'focus' );
|
||||||
|
|
||||||
|
focus
|
||||||
|
.append( 'line' )
|
||||||
|
.attr( 'class', 'focus-grid' )
|
||||||
|
.attr( 'x1', d => params.xLineScale( new Date( d.date ) ) )
|
||||||
|
.attr( 'y1', 0 )
|
||||||
|
.attr( 'x2', d => params.xLineScale( new Date( d.date ) ) )
|
||||||
|
.attr( 'y2', params.height )
|
||||||
|
.attr( 'opacity', '0' );
|
||||||
|
|
||||||
|
focus
|
||||||
|
.append( 'rect' )
|
||||||
|
.attr( 'class', 'focus-g' )
|
||||||
|
.attr( 'x', d => d.start )
|
||||||
|
.attr( 'y', 0 )
|
||||||
|
.attr( 'width', d => d.width )
|
||||||
|
.attr( 'height', params.height )
|
||||||
|
.attr( 'opacity', 0 )
|
||||||
|
.on( 'mouseover', ( d, i, nodes ) =>
|
||||||
|
handleMouseOverLineChart( d, i, nodes, node, data, params )
|
||||||
|
)
|
||||||
|
.on( 'mouseout', ( d, i, nodes ) => handleMouseOutLineChart( d, i, nodes, params ) );
|
||||||
};
|
};
|
||||||
|
|
||||||
export const drawBars = ( node, data, params ) => {
|
export const drawBars = ( node, data, params ) => {
|
||||||
|
|
Loading…
Reference in New Issue