show circles if the width to x-tick ratio is greater than 36px
This commit is contained in:
parent
a538ef7234
commit
2551696c6a
|
@ -588,7 +588,7 @@ export const drawLines = ( node, data, params ) => {
|
||||||
.attr( 'role', 'region' )
|
.attr( 'role', 'region' )
|
||||||
.attr( 'aria-label', d => d.key );
|
.attr( 'aria-label', d => d.key );
|
||||||
|
|
||||||
const lineStroke = params.width <= 1024 || params.uniqueDates.length > 50 ? 2 : 3;
|
const lineStroke = params.width <= 1329 || params.uniqueDates.length > 50 ? 2 : 3;
|
||||||
|
|
||||||
series
|
series
|
||||||
.append( 'path' )
|
.append( 'path' )
|
||||||
|
@ -603,16 +603,16 @@ export const drawLines = ( node, data, params ) => {
|
||||||
} )
|
} )
|
||||||
.attr( 'd', d => params.line( d.values ) );
|
.attr( 'd', d => params.line( d.values ) );
|
||||||
|
|
||||||
params.width / params.uniqueDates.length > 50 &&
|
params.width / params.uniqueDates.length > 36 &&
|
||||||
series
|
series
|
||||||
.selectAll( 'circle' )
|
.selectAll( 'circle' )
|
||||||
.data( ( d, i ) => d.values.map( row => ( { ...row, i, visible: d.visible, key: d.key } ) ) )
|
.data( ( d, i ) => d.values.map( row => ( { ...row, i, visible: d.visible, key: d.key } ) ) )
|
||||||
.enter()
|
.enter()
|
||||||
.append( 'circle' )
|
.append( 'circle' )
|
||||||
.attr( 'r', lineStroke * 2 )
|
.attr( 'r', 6 )
|
||||||
.attr( 'fill', d => getColor( d.key, params ) )
|
.attr( 'fill', d => getColor( d.key, params ) )
|
||||||
.attr( 'stroke', '#fff' )
|
.attr( 'stroke', '#fff' )
|
||||||
.attr( 'stroke-width', lineStroke )
|
.attr( 'stroke-width', 3 )
|
||||||
.style( 'opacity', d => {
|
.style( 'opacity', d => {
|
||||||
const opacity = d.focus ? 1 : 0.1;
|
const opacity = d.focus ? 1 : 0.1;
|
||||||
return d.visible ? opacity : 0;
|
return d.visible ? opacity : 0;
|
||||||
|
|
Loading…
Reference in New Issue