SVG chart generated through D3 not crispy

Question

I'm having some troubles to make my line chart looking crispy. I don't understand why is that. The code associated to the generation of the chart is a bit too long to share it here, so I created a JSFiddle with the result only.

<svg shape-rendering="geometricPrecision" width="1024" height="409"><defs><clipPath id="clip"><clip-rect id="clip-rect" x="30" y="40" width="944" height="389"></clip-rect></clipPath></defs><path stroke="none" class="splitted-lines lines line-0" stroke-width="0" fill="rgba(0,0,0,0)" shape-rendering="geometricPrecision" d="M30,1436L35,1436L40,1436L45,1436L50,1436L55,1436L60,1436L65,1436L70,1436L74,1436L79,1436L84,1436L89,1436L94,1436L99,1436L104,1436L109,1436L114,1436L119,1436L124,1436L129,1436L134,1436L139,1436L144,1436L149,1436L154,1436L158,1436L163,1436L168,1436L173,1436L178,1436L183,1436L188,1436L193,1436L198,1436L203,1436L208,1436L213,1436L218,1436L223,1436L228,1436L233,1436L238,1436L242,1436L247,1436L252,1436L257,1436L262,1436L267,1436L272,1436L277,1436L282,1436L287,1436L292,1436L297,1436L302,1436L307,1436L312,1436L317,1436L321,1436L326,1436L331,1436L336,1436L341,1436L346,1436L351,1436L356,1436L361,1436L366,1436L371,1436L376,1436L381,1436L386,1436L391,1436L396,1436L401,1436L405,1436L410,1436L415,1436L420,1436L425,1436L430,1436L435,1436L440,1436L445,1436L450,1436L455,1436L460,1436L465,1436L470,1436L475,1436L480,1436L485,1436L489,1436L494,1436L499,1436L504,1436L509,1436L514,1436L519,1436L524,1436L529,1436L534,1436L539,1436L544,1436L549,1436L554,1436L559,1436L564,1436L569,1436L573,1436L578,1436L583,1436L588,1436L593,1436L598,1436L603,1436L608,1436L613,1436L618,1436L623,1436L628,1436L633,1436L638,1436L643,1436L648,1436L653,1436L657,1436L662,1436L667,1436L672,1436L677,1436L682,1436L687,1436L692,1436L697,1436L702,1436L707,1436L712,1436L717,1436L722,1436L727,1436L732,1436L736,1436L741,1436L746,1436L751,1436L756,1436L761,1436L766,1436L771,1436L776,1436L781,1436L786,1436L791,1436L796,1436L801,1436L806,1436L811,1436L816,1436L821,1436L825,1436L830,1436L835,1436L840,1436L845,1436L850,1436L855,1436L860,1436L865,1436L870,1436L875,1436L880,1436L885,1436L890,1436L895,1436L900,1436L904,1436L909,1436L914,1436L919,1436L924,1436L929,1436L934,1436L939,1436L944,1436L944,324L939,324L934,325L929,325L924,326L919,327L914,327L909,328L904,329L900,329L895,330L890,330L885,331L880,332L875,332L870,333L865,333L860,334L855,334L850,335L845,336L840,336L835,337L830,337L825,338L821,338L816,339L811,339L806,340L801,340L796,341L791,342L786,342L781,343L776,343L771,344L766,344L761,345L756,345L751,346L746,346L741,347L736,347L732,347L727,348L722,348L717,349L712,349L707,350L702,350L697,351L692,351L687,351L682,351L677,352L672,352L667,352L662,352L657,352L653,352L648,352L643,351L638,351L633,351L628,351L623,351L618,350L613,350L608,350L603,349L598,349L593,348L588,348L583,348L578,347L573,347L569,346L564,346L559,345L554,344L549,344L544,343L539,342L534,342L529,341L524,340L519,340L514,339L509,338L504,338L499,337L494,336L489,335L485,334L480,334L475,333L470,332L465,331L460,330L455,330L450,329L445,328L440,327L435,327L430,326L425,325L420,324L415,323L410,323L405,322L401,321L396,321L391,320L386,319L381,318L376,318L371,317L366,316L361,316L356,315L351,314L346,314L341,313L336,312L331,312L326,311L321,311L317,310L312,309L307,309L302,308L297,307L292,307L287,306L282,305L277,305L272,304L267,303L262,303L257,302L252,301L247,301L242,300L238,299L233,299L228,298L223,297L218,296L213,296L208,295L203,294L198,294L193,293L188,292L183,292L178,291L173,290L168,290L163,289L158,288L154,288L149,287L144,286L139,286L134,285L129,284L124,284L119,283L114,282L109,282L104,281L99,280L94,279L89,278L84,277L79,275L74,273L70,271L65,268L60,265L55,262L50,258L45,255L40,252L35,249L30,245Z"></path><path stroke="none" class="splitted-lines lines line-1" stroke-width="0" fill="rgb(255,120,161)" shape-rendering="geometricPrecision" d="M30,246L35,250L40,253L45,256L50,259L55,263L60,266L65,269L70,272L74,274L79,276L84,278L89,279L94,280L99,281L104,282L109,283L114,283L119,284L124,285L129,285L134,286L139,287L144,287L149,288L154,289L158,289L163,290L168,291L173,291L178,292L183,293L188,293L193,294L198,295L203,295L208,296L213,297L218,297L223,298L228,299L233,300L238,300L242,301L247,302L252,302L257,303L262,304L267,304L272,305L277,306L282,306L287,307L292,308L297,308L302,309L307,310L312,310L317,311L321,312L326,312L331,313L336,313L341,314L346,315L351,315L356,316L361,317L366,317L371,318L376,319L381,319L386,320L391,321L396,322L401,322L405,323L410,324L415,324L420,325L425,326L430,327L435,328L440,328L445,329L450,330L455,331L460,331L465,332L470,333L475,334L480,335L485,335L489,336L494,337L499,338L504,339L509,339L514,340L519,341L524,341L529,342L534,343L539,343L544,344L549,345L554,345L559,346L564,347L569,347L573,348L578,348L583,349L588,349L593,349L598,350L603,350L608,351L613,351L618,351L623,352L628,352L633,352L638,352L643,352L648,353L653,353L657,353L662,353L667,353L672,353L677,353L682,352L687,352L692,352L697,352L702,351L707,351L712,350L717,350L722,349L727,349L732,348L736,348L741,348L746,347L751,347L756,346L761,346L766,345L771,345L776,344L781,344L786,343L791,343L796,342L801,341L806,341L811,340L816,340L821,339L825,339L830,338L835,338L840,337L845,337L850,336L855,335L860,335L865,334L870,334L875,333L880,333L885,332L890,331L895,331L900,330L904,330L909,329L914,328L919,328L924,327L929,326L934,326L939,325L944,325L944,267L939,267L934,267L929,268L924,268L919,268L914,269L909,269L904,269L900,270L895,270L890,270L885,271L880,271L875,271L870,271L865,272L860,272L855,272L850,273L845,273L840,273L835,273L830,274L825,274L821,274L816,275L811,275L806,275L801,275L796,276L791,276L786,276L781,277L776,277L771,277L766,277L761,278L756,278L751,278L746,278L741,279L736,279L732,279L727,279L722,280L717,280L712,280L707,280L702,281L697,281L692,281L687,281L682,281L677,281L672,282L667,282L662,282L657,282L653,282L648,282L643,282L638,282L633,282L628,282L623,282L618,281L613,281L608,281L603,281L598,281L593,281L588,281L583,281L578,281L573,280L569,280L564,280L559,280L554,280L549,280L544,279L539,279L534,279L529,279L524,279L519,278L514,278L509,278L504,278L499,277L494,277L489,277L485,277L480,276L475,276L470,276L465,276L460,275L455,275L450,275L445,275L440,274L435,274L430,274L425,274L420,273L415,273L410,273L405,273L401,273L396,272L391,272L386,272L381,272L376,271L371,271L366,271L361,271L356,271L351,270L346,270L341,270L336,270L331,270L326,269L321,269L317,269L312,269L307,269L302,268L297,268L292,268L287,268L282,267L277,267L272,267L267,267L262,266L257,266L252,266L247,266L242,265L238,265L233,265L228,265L223,264L218,264L213,264L208,264L203,263L198,263L193,263L188,263L183,262L178,262L173,262L168,262L163,261L158,261L154,261L149,261L144,260L139,260L134,260L129,260L124,259L119,259L114,259L109,259L104,258L99,258L94,258L89,257L84,257L79,256L74,255L70,254L65,253L60,252L55,251L50,250L45,248L40,247L35,246L30,245Z"></path><path stroke="none" class="splitted-lines lines line-2" stroke-width="0" fill="rgb(62,98,143)" shape-rendering="geometricPrecision" d="M30,246L35,247L40,248L45,249L50,251L55,252L60,253L65,254L70,255L74,256L79,257L84,258L89,258L94,259L99,259L104,259L109,260L114,260L119,260L124,260L129,261L134,261L139,261L144,261L149,262L154,262L158,262L163,262L168,263L173,263L178,263L183,263L188,264L193,264L198,264L203,264L208,265L213,265L218,265L223,265L228,266L233,266L238,266L242,266L247,267L252,267L257,267L262,267L267,268L272,268L277,268L282,268L287,269L292,269L297,269L302,269L307,270L312,270L317,270L321,270L326,270L331,271L336,271L341,271L346,271L351,271L356,272L361,272L366,272L371,272L376,272L381,273L386,273L391,273L396,273L401,274L405,274L410,274L415,274L420,274L425,275L430,275L435,275L440,275L445,276L450,276L455,276L460,276L465,277L470,277L475,277L480,277L485,278L489,278L494,278L499,278L504,279L509,279L514,279L519,279L524,280L529,280L534,280L539,280L544,280L549,281L554,281L559,281L564,281L569,281L573,281L578,282L583,282L588,282L593,282L598,282L603,282L608,282L613,282L618,282L623,283L628,283L633,283L638,283L643,283L648,283L653,283L657,283L662,283L667,283L672,283L677,282L682,282L687,282L692,282L697,282L702,282L707,281L712,281L717,281L722,281L727,280L732,280L736,280L741,280L746,279L751,279L756,279L761,279L766,278L771,278L776,278L781,278L786,277L791,277L796,277L801,276L806,276L811,276L816,276L821,275L825,275L830,275L835,274L840,274L845,274L850,274L855,273L860,273L865,273L870,272L875,272L880,272L885,272L890,271L895,271L900,271L904,270L909,270L914,270L919,269L924,269L929,269L934,268L939,268L944,268L944,229L939,229L934,229L929,229L924,229L919,229L914,229L909,230L904,230L900,230L895,230L890,230L885,230L880,230L875,230L870,231L865,231L860,231L855,231L850,231L845,231L840,231L835,231L830,231L825,232L821,232L816,232L811,232L806,232L801,232L796,232L791,232L786,232L781,233L776,233L771,233L766,233L761,233L756,233L751,233L746,233L741,233L736,234L732,234L727,234L722,234L717,234L712,234L707,234L702,234L697,234L692,234L687,235L682,235L677,235L672,235L667,235L662,235L657,235L653,235L648,235L643,235L638,235L633,235L628,236L623,236L618,236L613,236L608,236L603,236L598,236L593,236L588,236L583,236L578,236L573,236L569,236L564,237L559,237L554,237L549,237L544,237L539,237L534,237L529,237L524,237L519,237L514,238L509,238L504,238L499,238L494,238L489,238L485,238L480,238L475,238L470,239L465,239L460,239L455,239L450,239L445,239L440,239L435,239L430,239L425,239L420,240L415,240L410,240L405,240L401,240L396,240L391,240L386,240L381,240L376,241L371,241L366,241L361,241L356,241L351,241L346,241L341,241L336,241L331,242L326,242L321,242L317,242L312,242L307,242L302,242L297,242L292,242L287,242L282,242L277,242L272,242L267,242L262,242L257,242L252,242L247,242L242,243L238,243L233,243L228,243L223,243L218,243L213,243L208,243L203,243L198,243L193,243L188,243L183,243L178,243L173,243L168,243L163,243L158,243L154,243L149,243L144,243L139,243L134,243L129,243L124,243L119,243L114,243L109,243L104,243L99,243L94,243L89,244L84,244L79,244L74,244L70,244L65,244L60,244L55,244L50,244L45,244L40,244L35,244L30,245Z"></path><path stroke="none" class="splitted-lines lines line-3" stroke-width="0" fill="rgb(66,101,145)" shape-rendering="geometricPrecision" d="M30,246L35,245L40,245L45,245L50,245L55,245L60,245L65,245L70,245L74,245L79,245L84,245L89,245L94,244L99,244L104,244L109,244L114,244L119,244L124,244L129,244L134,244L139,244L144,244L149,244L154,244L158,244L163,244L168,244L173,244L178,244L183,244L188,244L193,244L198,244L203,244L208,244L213,244L218,244L223,244L228,244L233,244L238,244L242,244L247,243L252,243L257,243L262,243L267,243L272,243L277,243L282,243L287,243L292,243L297,243L302,243L307,243L312,243L317,243L321,243L326,243L331,243L336,242L341,242L346,242L351,242L356,242L361,242L366,242L371,242L376,242L381,241L386,241L391,241L396,241L401,241L405,241L410,241L415,241L420,241L425,240L430,240L435,240L440,240L445,240L450,240L455,240L460,240L465,240L470,240L475,239L480,239L485,239L489,239L494,239L499,239L504,239L509,239L514,239L519,238L524,238L529,238L534,238L539,238L544,238L549,238L554,238L559,238L564,238L569,237L573,237L578,237L583,237L588,237L593,237L598,237L603,237L608,237L613,237L618,237L623,237L628,237L633,236L638,236L643,236L648,236L653,236L657,236L662,236L667,236L672,236L677,236L682,236L687,236L692,235L697,235L702,235L707,235L712,235L717,235L722,235L727,235L732,235L736,235L741,234L746,234L751,234L756,234L761,234L766,234L771,234L776,234L781,234L786,233L791,233L796,233L801,233L806,233L811,233L816,233L821,233L825,233L830,232L835,232L840,232L845,232L850,232L855,232L860,232L865,232L870,232L875,231L880,231L885,231L890,231L895,231L900,231L904,231L909,231L914,230L919,230L924,230L929,230L934,230L939,230L944,230L944,139L939,140L934,140L929,140L924,140L919,141L914,141L909,141L904,141L900,141L895,142L890,142L885,142L880,142L875,143L870,143L865,143L860,143L855,144L850,144L845,144L840,144L835,145L830,145L825,145L821,145L816,146L811,146L806,146L801,146L796,147L791,147L786,147L781,147L776,148L771,148L766,148L761,148L756,149L751,149L746,149L741,149L736,150L732,150L727,150L722,151L717,151L712,151L707,151L702,152L697,152L692,152L687,153L682,153L677,153L672,154L667,154L662,154L657,155L653,155L648,156L643,156L638,157L633,157L628,158L623,158L618,158L613,159L608,159L603,160L598,160L593,161L588,161L583,162L578,162L573,163L569,163L564,164L559,164L554,165L549,166L544,166L539,167L534,167L529,168L524,168L519,169L514,169L509,170L504,171L499,171L494,172L489,172L485,173L480,173L475,174L470,174L465,175L460,176L455,176L450,177L445,177L440,178L435,178L430,179L425,179L420,180L415,181L410,181L405,182L401,182L396,183L391,183L386,184L381,184L376,185L371,185L366,186L361,186L356,187L351,187L346,188L341,188L336,189L331,189L326,190L321,191L317,191L312,192L307,192L302,193L297,193L292,194L287,194L282,195L277,195L272,196L267,197L262,197L257,198L252,198L247,199L242,199L238,200L233,200L228,201L223,201L218,202L213,203L208,203L203,204L198,204L193,205L188,205L183,206L178,206L173,207L168,208L163,208L158,209L154,209L149,210L144,210L139,211L134,212L129,212L124,213L119,213L114,214L109,214L104,215L99,215L94,216L89,217L84,218L79,220L74,221L70,223L65,226L60,228L55,231L50,233L45,236L40,239L35,241L30,245Z"></path><path stroke="none" class="splitted-lines lines line-4" stroke-width="0" fill="rgb(62,255,143)" shape-rendering="geometricPrecision" d="M30,246L35,242L40,240L45,237L50,234L55,232L60,229L65,227L70,224L74,222L79,221L84,219L89,218L94,217L99,216L104,216L109,215L114,215L119,214L124,214L129,213L134,213L139,212L144,211L149,211L154,210L158,210L163,209L168,209L173,208L178,207L183,207L188,206L193,206L198,205L203,205L208,204L213,204L218,203L223,202L228,202L233,201L238,201L242,200L247,200L252,199L257,199L262,198L267,198L272,197L277,196L282,196L287,195L292,195L297,194L302,194L307,193L312,193L317,192L321,192L326,191L331,190L336,190L341,189L346,189L351,188L356,188L361,187L366,187L371,186L376,186L381,185L386,185L391,184L396,184L401,183L405,183L410,182L415,182L420,181L425,180L430,180L435,179L440,179L445,178L450,178L455,177L460,177L465,176L470,175L475,175L480,174L485,174L489,173L494,173L499,172L504,172L509,171L514,170L519,170L524,169L529,169L534,168L539,168L544,167L549,167L554,166L559,165L564,165L569,164L573,164L578,163L583,163L588,162L593,162L598,161L603,161L608,160L613,160L618,159L623,159L628,159L633,158L638,158L643,157L648,157L653,156L657,156L662,155L667,155L672,155L677,154L682,154L687,154L692,153L697,153L702,153L707,152L712,152L717,152L722,152L727,151L732,151L736,151L741,150L746,150L751,150L756,150L761,149L766,149L771,149L776,149L781,148L786,148L791,148L796,148L801,147L806,147L811,147L816,147L821,146L825,146L830,146L835,146L840,145L845,145L850,145L855,145L860,144L865,144L870,144L875,144L880,143L885,143L890,143L895,143L900,142L904,142L909,142L914,142L919,142L924,141L929,141L934,141L939,141L944,140L944,80L939,80L934,80L929,81L924,81L919,81L914,82L909,82L904,82L900,83L895,83L890,83L885,83L880,84L875,84L870,84L865,85L860,85L855,85L850,86L845,86L840,86L835,87L830,87L825,87L821,88L816,88L811,88L806,89L801,89L796,89L791,90L786,90L781,91L776,91L771,91L766,92L761,92L756,92L751,93L746,93L741,94L736,94L732,94L727,95L722,95L717,95L712,96L707,96L702,97L697,97L692,97L687,98L682,98L677,99L672,100L667,100L662,101L657,101L653,102L648,103L643,103L638,104L633,105L628,106L623,106L618,107L613,108L608,109L603,109L598,110L593,111L588,112L583,112L578,113L573,114L569,115L564,116L559,116L554,117L549,118L544,119L539,120L534,121L529,121L524,122L519,123L514,124L509,125L504,126L499,127L494,127L489,128L485,129L480,130L475,131L470,132L465,133L460,133L455,134L450,135L445,136L440,137L435,138L430,139L425,139L420,140L415,141L410,142L405,143L401,144L396,144L391,145L386,146L381,147L376,148L371,148L366,149L361,150L356,151L351,152L346,152L341,153L336,154L331,155L326,156L321,156L317,157L312,158L307,159L302,160L297,161L292,162L287,162L282,163L277,164L272,165L267,166L262,167L257,168L252,169L247,170L242,170L238,171L233,172L228,173L223,174L218,175L213,176L208,177L203,178L198,179L193,179L188,180L183,181L178,182L173,183L168,184L163,185L158,186L154,187L149,188L144,189L139,189L134,190L129,191L124,192L119,193L114,194L109,195L104,196L99,197L94,198L89,199L84,201L79,204L74,207L70,210L65,214L60,218L55,222L50,227L45,231L40,235L35,240L30,245Z"></path><path shape-rendering="geometricPrecision" class="simple-lines lines line-0" stroke="rgb(255,0,0)" stroke-width="2" fill="none" d="M30,245L35,249L40,252L45,255L50,258L55,262L60,265L65,268L70,271L74,273L79,275L84,277L89,278L94,279L99,280L104,281L109,282L114,282L119,283L124,284L129,284L134,285L139,286L144,286L149,287L154,288L158,288L163,289L168,290L173,290L178,291L183,292L188,292L193,293L198,294L203,294L208,295L213,296L218,296L223,297L228,298L233,299L238,299L242,300L247,301L252,301L257,302L262,303L267,303L272,304L277,305L282,305L287,306L292,307L297,307L302,308L307,309L312,309L317,310L321,311L326,311L331,312L336,312L341,313L346,314L351,314L356,315L361,316L366,316L371,317L376,318L381,318L386,319L391,320L396,321L401,321L405,322L410,323L415,323L420,324L425,325L430,326L435,327L440,327L445,328L450,329L455,330L460,330L465,331L470,332L475,333L480,334L485,334L489,335L494,336L499,337L504,338L509,338L514,339L519,340L524,340L529,341L534,342L539,342L544,343L549,344L554,344L559,345L564,346L569,346L573,347L578,347L583,348L588,348L593,348L598,349L603,349L608,350L613,350L618,350L623,351L628,351L633,351L638,351L643,351L648,352L653,352L657,352L662,352L667,352L672,352L677,352L682,351L687,351L692,351L697,351L702,350L707,350L712,349L717,349L722,348L727,348L732,347L736,347L741,347L746,346L751,346L756,345L761,345L766,344L771,344L776,343L781,343L786,342L791,342L796,341L801,340L806,340L811,339L816,339L821,338L825,338L830,337L835,337L840,336L845,336L850,335L855,334L860,334L865,333L870,333L875,332L880,332L885,331L890,330L895,330L900,329L904,329L909,328L914,327L919,327L924,326L929,325L934,325L939,324L944,324"></path><path shape-rendering="geometricPrecision" class="simple-lines lines line-1" stroke="rgb(255,0,0)" stroke-width="2" fill="none" d="M30,245L35,244L40,244L45,244L50,244L55,244L60,244L65,244L70,244L74,244L79,244L84,244L89,244L94,243L99,243L104,243L109,243L114,243L119,243L124,243L129,243L134,243L139,243L144,243L149,243L154,243L158,243L163,243L168,243L173,243L178,243L183,243L188,243L193,243L198,243L203,243L208,243L213,243L218,243L223,243L228,243L233,243L238,243L242,243L247,242L252,242L257,242L262,242L267,242L272,242L277,242L282,242L287,242L292,242L297,242L302,242L307,242L312,242L317,242L321,242L326,242L331,242L336,241L341,241L346,241L351,241L356,241L361,241L366,241L371,241L376,241L381,240L386,240L391,240L396,240L401,240L405,240L410,240L415,240L420,240L425,239L430,239L435,239L440,239L445,239L450,239L455,239L460,239L465,239L470,239L475,238L480,238L485,238L489,238L494,238L499,238L504,238L509,238L514,238L519,237L524,237L529,237L534,237L539,237L544,237L549,237L554,237L559,237L564,237L569,236L573,236L578,236L583,236L588,236L593,236L598,236L603,236L608,236L613,236L618,236L623,236L628,236L633,235L638,235L643,235L648,235L653,235L657,235L662,235L667,235L672,235L677,235L682,235L687,235L692,234L697,234L702,234L707,234L712,234L717,234L722,234L727,234L732,234L736,234L741,233L746,233L751,233L756,233L761,233L766,233L771,233L776,233L781,233L786,232L791,232L796,232L801,232L806,232L811,232L816,232L821,232L825,232L830,231L835,231L840,231L845,231L850,231L855,231L860,231L865,231L870,231L875,230L880,230L885,230L890,230L895,230L900,230L904,230L909,230L914,229L919,229L924,229L929,229L934,229L939,229L944,229"></path><path shape-rendering="geometricPrecision" class="simple-lines lines line-2" stroke="rgb(255,0,0)" stroke-width="2" fill="none" d="M30,245L35,240L40,235L45,231L50,227L55,222L60,218L65,214L70,210L74,207L79,204L84,201L89,199L94,198L99,197L104,196L109,195L114,194L119,193L124,192L129,191L134,190L139,189L144,189L149,188L154,187L158,186L163,185L168,184L173,183L178,182L183,181L188,180L193,179L198,179L203,178L208,177L213,176L218,175L223,174L228,173L233,172L238,171L242,170L247,170L252,169L257,168L262,167L267,166L272,165L277,164L282,163L287,162L292,162L297,161L302,160L307,159L312,158L317,157L321,156L326,156L331,155L336,154L341,153L346,152L351,152L356,151L361,150L366,149L371,148L376,148L381,147L386,146L391,145L396,144L401,144L405,143L410,142L415,141L420,140L425,139L430,139L435,138L440,137L445,136L450,135L455,134L460,133L465,133L470,132L475,131L480,130L485,129L489,128L494,127L499,127L504,126L509,125L514,124L519,123L524,122L529,121L534,121L539,120L544,119L549,118L554,117L559,116L564,116L569,115L573,114L578,113L583,112L588,112L593,111L598,110L603,109L608,109L613,108L618,107L623,106L628,106L633,105L638,104L643,103L648,103L653,102L657,101L662,101L667,100L672,100L677,99L682,98L687,98L692,97L697,97L702,97L707,96L712,96L717,95L722,95L727,95L732,94L736,94L741,94L746,93L751,93L756,92L761,92L766,92L771,91L776,91L781,91L786,90L791,90L796,89L801,89L806,89L811,88L816,88L821,88L825,87L830,87L835,87L840,86L845,86L850,86L855,85L860,85L865,85L870,84L875,84L880,84L885,83L890,83L895,83L900,83L904,82L909,82L914,82L919,81L924,81L929,81L934,80L939,80L944,80"></path><path shape-rendering="geometricPrecision" class="simple-lines lines line-3" stroke="rgb(0,0,255)" stroke-width="2" fill="none" d="M30,245L35,245L40,245L45,245L50,245L55,245L60,245L65,245L70,245L74,245L79,245L84,245L89,245L94,245L99,245L104,245L109,245L114,245L119,245L124,245L129,245L134,245L139,245L144,245L149,245L154,245L158,245L163,245L168,245L173,245L178,245L183,245L188,245L193,245L198,245L203,245L208,245L213,245L218,245L223,245L228,245L233,245L238,245L242,245L247,245L252,245L257,245L262,245L267,245L272,245L277,245L282,245L287,245L292,245L297,245L302,245L307,245L312,245L317,245L321,245L326,245L331,245L336,245L341,245L346,245L351,245L356,245L361,245L366,245L371,245L376,245L381,245L386,245L391,245L396,245L401,245L405,245L410,245L415,245L420,245L425,245L430,245L435,245L440,245L445,245L450,245L455,245L460,245L465,245L470,245L475,245L480,245L485,245L489,245L494,245L499,245L504,245L509,245L514,245L519,245L524,245L529,245L534,245L539,245L544,245L549,245L554,245L559,245L564,245L569,245L573,245L578,245L583,245L588,245L593,245L598,245L603,245L608,245L613,245L618,245L623,245L628,245L633,245L638,245L643,245L648,245L653,245L657,245L662,245L667,245L672,245L677,245L682,245L687,245L692,245L697,245L702,245L707,245L712,245L717,245L722,245L727,245L732,245L736,245L741,245L746,245L751,245L756,245L761,245L766,245L771,245L776,245L781,245L786,245L791,245L796,245L801,245L806,245L811,245L816,245L821,245L825,245L830,245L835,245L840,245L845,245L850,245L855,245L860,245L865,245L870,245L875,245L880,245L885,245L890,245L895,245L900,245L904,245L909,245L914,245L919,245L924,245L929,245L934,245L939,245L944,245"></path><g class="x axis" transform="translate(0, 40)"><g class="tick" transform="translate(96,0)" style="opacity: 1;"><line y2="-5" x2="0"></line><text dy="0em" y="-15" x="0" style="text-anchor: middle;">Jan 16</text></g><g class="tick" transform="translate(277,0)" style="opacity: 1;"><line y2="-5" x2="0"></line><text dy="0em" y="-15" x="0" style="text-anchor: middle;">Jan 17</text></g><g class="tick" transform="translate(458,0)" style="opacity: 1;"><line y2="-5" x2="0"></line><text dy="0em" y="-15" x="0" style="text-anchor: middle;">Jan 18</text></g><g class="tick" transform="translate(638,0)" style="opacity: 1;"><line y2="-5" x2="0"></line><text dy="0em" y="-15" x="0" style="text-anchor: middle;">Jan 19</text></g><g class="tick" transform="translate(818,0)" style="opacity: 1;"><line y2="-5" x2="0"></line><text dy="0em" y="-15" x="0" style="text-anchor: middle;">Jan 20</text></g><path class="domain" d="M30,-5V0H944V-5"></path></g><g class="y axis" transform="translate(30, 0)"><g class="tick" transform="translate(0,364)" style="opacity: 1;"><line x2="914" y2="0"></line><text x="5" y="-5" style="text-anchor: start;"></text></g><g class="tick base-line" transform="translate(0,245)" style="opacity: 1;"><line x2="914" y2="0"></line><text x="5" y="-5" style="text-anchor: start;"></text></g><g class="tick" transform="translate(0,126)" style="opacity: 1;"><line x2="914" y2="0"></line><text x="5" y="-5" style="text-anchor: start;"></text></g></g></svg>

https://jsfiddle.net/gqtuocbw/

I tried multiple stuff, like

shape-rendering="auto"
shape-rendering="geometricPrecision"

But nothing works for me, and when I see this http://bl.ocks.org/mbostock/4060954 I can't understand the issue.

When I will understand the underlying problem, I will update my post with examples that makes it more relevant for future readers.

Cheers.

EDIT (SOLUTION + EXPLANATIONS):

Find out in the following JSFiddle the resolved issue: https://jsfiddle.net/cf35rfy2/1/

So the problem was because of rangeRound() used with a simple interpolation('basis')

And the doc says:

linear.rangeRound(values)

Sets the scale's output range to the specified array of values, while also setting the scale's interpolator to d3.interpolateRound. This is a convenience routine for when the values output by the scale should be exact integers, such as to avoid antialiasing artifacts. It is also possible to round the output values manually after the scale is applied.

I guess that I should have used it with interpolateRound function.

Hope this will help someone. Don't hesitate to correct me if I said something wrong here; but anyhow this solved my issue (thanks to squeamish ossifrage answers)

Answer 1

I'm not sure what you mean by "crispy", but your jsfiddle example looks quite pixellated to me. It's quite easy to see why this is happening. Here's an excerpt from the d attribute of the first <path> element:

L944,324 L939,324 L934,325 L929,325 L924,326 L919,327 L914,327 L909,328 L904,329
L900,329 L895,330 L890,330

As you can see, the coordinates all have integer values, and the Y coordinate only changes intermittently. The result is a line that consists of many horizontal segments with little vertical jumps between each segment and the next. If you change these coordinates to floating point values with a couple of digits after the decimal point, then your lines will be smoother.

Here's an example:

<svg width="400" height="100" viewBox="0 0 200 50">
<g fill="none" stroke-width="2px">
<!-- Grey path with integer Y coordinates -->
<path d="M5 33 7 32 9 32 11 32 13 31 15 31 17 31 19 31 21 30 23 30 25 30 27 29 29 29 31 29
         33 28 35 28 37 28 39 28 41 27 43 27 45 27 47 26 49 26 51 26 53 25 55 25 57 25 59
         25 61 24 63 24 65 24 67 23 69 23 71 23 73 23 75 22 77 22 79 22 81 21 83 21 85 21
         87 20 89 20 91 20 93 20 95 19 97 19 99 19 101 18 103 18 105 18 107 18 109 17 111
         17 113 17 115 16 117 16 119 16 121 15 123 15 125 15 127 15 129 14 131 14 133 14
         135 13 137 13 139 13 141 12 143 12 145 12 147 12 149 11 151 11 153 11 155 10 157
         10 159 10 161 10 163 9 165 9 167 9 169 8 171 8 173 8 175 7 177 7 179 7 181 7 183
         6 185 6 187 6 189 5 191 5 193 5 195 5 197 4 199 4" stroke="#888"/>
<!-- Blue path with floating-point Y coordinates -->
<path d="M5 43.12 7 42.82 9 42.52 11 42.23 13 41.93 15 41.64 17 41.34 19 41.05 21 40.75 23
         40.45 25 40.16 27 39.86 29 39.57 31 39.27 33 38.98 35 38.68 37 38.38 39 38.09 41
         37.79 43 37.50 45 37.20 47 36.90 49 36.61 51 36.31 53 36.02 55 35.72 57 35.43 59
         35.13 61 34.83 63 34.54 65 34.24 67 33.95 69 33.65 71 33.36 73 33.06 75 32.76 77
         32.47 79 32.17 81 31.88 83 31.58 85 31.29 87 30.99 89 30.69 91 30.40 93 30.10 95
         29.81 97 29.51 99 29.21 101 28.92 103 28.62 105 28.33 107 28.03 109 27.74 111
         27.44 113 27.14 115 26.85 117 26.55 119 26.26 121 25.96 123 25.67 125 25.37 127
         25.07 129 24.78 131 24.48 133 24.19 135 23.89 137 23.60 139 23.30 141 23.00 143
         22.71 145 22.41 147 22.12 149 21.82 151 21.52 153 21.23 155 20.93 157 20.64 159
         20.34 161 20.05 163 19.75 165 19.45 167 19.16 169 18.86 171 18.57 173 18.27 175
         17.98 177 17.68 179 17.38 181 17.09 183 16.79 185 16.50 187 16.20 189 15.91 191
         15.61 193 15.31 195 15.02 197 14.72 199 14.43" stroke="#44c"/>
</g>
</svg>