@@ -822,7 +822,7 @@ export const Graph = {
822822 /**Basic Graph */
823823 graph ( type , data , { area = true , points = true , text = true , low = NaN , high = NaN , match = null , labels = null , width = 480 , height = 315 , ticks = 0 } = { } ) {
824824 //Generate SVG
825- const margin = { top :10 , left :10 , right :10 , bottom :45 }
825+ const margin = { top : 10 , left : 10 , right : 10 , bottom : 45 }
826826 const d3n = new D3node ( )
827827 const svg = d3n . createSVG ( width , height )
828828
@@ -862,7 +862,7 @@ export const Graph = {
862862 . range ( [ margin . left , height - margin . top - margin . bottom ] )
863863 svg . append ( "g" )
864864 . attr ( "transform" , `translate(${ margin . left } ,${ margin . top } )` )
865- . call ( d3 . axisRight ( y ) . ticks ( Math . round ( height / 50 ) ) . tickSize ( width - margin . left - margin . right ) )
865+ . call ( d3 . axisRight ( y ) . ticks ( Math . round ( height / 50 ) ) . tickSize ( width - margin . left - margin . right ) )
866866 . call ( g => g . select ( ".domain" ) . remove ( ) )
867867 . call ( g => g . selectAll ( ".tick line" ) . attr ( "stroke-opacity" , 0.5 ) . attr ( "stroke-dasharray" , "2,2" ) )
868868 . call ( g => g . selectAll ( ".tick text" ) . attr ( "x" , 0 ) . attr ( "dy" , - 4 ) )
@@ -883,7 +883,7 @@ export const Graph = {
883883 d3 . line ( )
884884 . curve ( d3 . curveLinear )
885885 . x ( d => x ( d [ 0 ] ) )
886- . y ( d => y ( d [ 1 ] ) )
886+ . y ( d => y ( d [ 1 ] ) ) ,
887887 )
888888 . attr ( "fill" , "transparent" )
889889 . attr ( "stroke" , "#87ceeb" )
@@ -892,24 +892,24 @@ export const Graph = {
892892 //Generate graph area
893893 if ( area ) {
894894 svg . append ( "path" )
895- . datum ( datum )
896- . attr ( "transform" , `translate(${ margin . left } ,${ margin . top } )` )
897- . attr (
898- "d" ,
899- d3 . area ( )
900- . curve ( d3 . curveLinear )
901- . x ( d => x ( d [ 0 ] ) )
902- . y0 ( d => y ( d [ 1 ] ) )
903- . y1 ( ( ) => y ( low ) ) ,
904- )
905- . attr ( "fill" , "rgba(88, 166, 255, .1)" )
895+ . datum ( datum )
896+ . attr ( "transform" , `translate(${ margin . left } ,${ margin . top } )` )
897+ . attr (
898+ "d" ,
899+ d3 . area ( )
900+ . curve ( d3 . curveLinear )
901+ . x ( d => x ( d [ 0 ] ) )
902+ . y0 ( d => y ( d [ 1 ] ) )
903+ . y1 ( ( ) => y ( low ) ) ,
904+ )
905+ . attr ( "fill" , "rgba(88, 166, 255, .1)" )
906906 }
907907
908908 //Generate graph points
909909 if ( points ) {
910910 svg . append ( "g" )
911- . selectAll ( "circle" )
912- . data ( yticked )
911+ . selectAll ( "circle" )
912+ . data ( yticked )
913913 . join ( "circle" )
914914 . attr ( "transform" , `translate(${ margin . left } ,${ margin . top } )` )
915915 . attr ( "cx" , d => x ( d [ 0 ] ) )
@@ -929,10 +929,10 @@ export const Graph = {
929929 . attr ( "stroke-linejoin" , "round" )
930930 . attr ( "stroke-width" , 4 )
931931 . attr ( "paint-order" , "stroke fill" )
932- . selectAll ( "text" )
933- . data ( yticked )
934- . join ( "text" )
935- . attr ( "transform" , `translate(${ margin . left } ,${ margin . top - 4 } )` )
932+ . selectAll ( "text" )
933+ . data ( yticked )
934+ . join ( "text" )
935+ . attr ( "transform" , `translate(${ margin . left } ,${ margin . top - 4 } )` )
936936 . attr ( "x" , d => x ( d [ 0 ] ) )
937937 . attr ( "y" , d => y ( d [ 1 ] ) )
938938 . text ( d => d [ 2 ] ? d [ 2 ] : "" )
@@ -955,46 +955,46 @@ export const Graph = {
955955
956956 //Construct arcs
957957 const color = d3 . scaleOrdinal ( K , d3 . schemeSpectral [ K . length ] )
958- const arcs = d3 . pie ( ) . padAngle ( 1 / radius ) . sort ( null ) . value ( i => V [ i ] ) ( I )
958+ const arcs = d3 . pie ( ) . padAngle ( 1 / radius ) . sort ( null ) . value ( i => V [ i ] ) ( I )
959959 const arc = d3 . arc ( ) . innerRadius ( 0 ) . outerRadius ( radius )
960- const labels = d3 . arc ( ) . innerRadius ( radius / 2 ) . outerRadius ( radius / 2 )
960+ const labels = d3 . arc ( ) . innerRadius ( radius / 2 ) . outerRadius ( radius / 2 )
961961
962962 svg . append ( "g" )
963- . attr ( "transform" , `translate(${ width / 2 } ,${ height / 2 } )` )
963+ . attr ( "transform" , `translate(${ width / 2 } ,${ height / 2 } )` )
964964 . attr ( "stroke" , "white" )
965965 . attr ( "stroke-width" , 1 )
966966 . attr ( "stroke-linejoin" , "round" )
967- . selectAll ( "path" )
968- . data ( arcs )
969- . join ( "path" )
967+ . selectAll ( "path" )
968+ . data ( arcs )
969+ . join ( "path" )
970970 . attr ( "fill" , d => colors ?. [ K [ d . data ] ] ?? color ( K [ d . data ] ) )
971971 . attr ( "d" , arc )
972- . append ( "title" )
972+ . append ( "title" )
973973 . text ( d => `${ K [ d . data ] } \n${ V [ d . data ] } ` )
974974
975975 svg . append ( "g" )
976- . attr ( "transform" , `translate(${ width / 2 } ,${ height / 2 } )` )
976+ . attr ( "transform" , `translate(${ width / 2 } ,${ height / 2 } )` )
977977 . attr ( "font-family" , "sans-serif" )
978978 . attr ( "font-size" , 12 )
979979 . attr ( "text-anchor" , "middle" )
980980 . attr ( "fill" , "white" )
981981 . attr ( "stroke" , "rbga(0,0,0,.9)" )
982982 . attr ( "paint-order" , "stroke fill" )
983- . selectAll ( "text" )
984- . data ( arcs )
985- . join ( "text" )
983+ . selectAll ( "text" )
984+ . data ( arcs )
985+ . join ( "text" )
986986 . attr ( "transform" , d => `translate(${ labels . centroid ( d ) } )` )
987- . selectAll ( "tspan" )
988- . data ( d => {
989- const lines = `${ K [ d . data ] } \n${ V [ d . data ] } ` . split ( / \n / )
990- return ( d . endAngle - d . startAngle ) > 0.25 ? lines : lines . slice ( 0 , 1 )
991- } )
992- . join ( "tspan" )
987+ . selectAll ( "tspan" )
988+ . data ( d => {
989+ const lines = `${ K [ d . data ] } \n${ V [ d . data ] } ` . split ( / \n / )
990+ return ( d . endAngle - d . startAngle ) > 0.25 ? lines : lines . slice ( 0 , 1 )
991+ } )
992+ . join ( "tspan" )
993993 . attr ( "x" , 0 )
994994 . attr ( "y" , ( _ , i ) => `${ i * 1.1 } em` )
995995 . attr ( "font-weight" , ( _ , i ) => i ? null : "bold" )
996996 . text ( d => d )
997997
998998 return d3n . svgString ( )
999- }
999+ } ,
10001000}
0 commit comments