我有一些麻烦让我的折线图看起来很脆。我不明白为什么会这样。与图表生成相关的代码有点太长了,无法在这里分享,所以我创建了一个仅包含结果的JSFiddle。
<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/
我尝试过多种内容,比如
shape-rendering="auto"
shape-rendering="geometricPrecision"
但是没有什么对我有用,当我看到这个http://bl.ocks.org/mbostock/4060954时,我无法理解这个问题。
当我理解潜在的问题时,我会用一些示例更新我的帖子,使其更适合未来的读者。
干杯。
编辑(解决方案+说明):
在以下JSFiddle中找出已解决的问题:https://jsfiddle.net/cf35rfy2/1/
所以问题是因为rangeRound()
与简单interpolation('basis')
文件说:
linear.rangeRound(值)
将比例的输出范围设置为指定的数组值,同时将比例的插值器设置为d3.interpolateRound。这是一个方便的例程,用于当比例输出的值应该是精确整数时,例如以避免抗锯齿伪像。在应用比例后,也可以手动舍入输出值。
我想我应该将它与interpolateRound
函数一起使用。
希望这会对某人有所帮助。如果我在这里说错了,请不要犹豫纠正我;但无论如何这解决了我的问题(感谢squeamish ossifrage
答案)
答案 0 :(得分:1)
我不确定你所说的“脆”是什么意思,但你的jsfiddle例子对我来说看起来很像素。很容易理解为什么会这样。以下摘自第一个d
元素的<path>
属性:
L944,324 L939,324 L934,325 L929,325 L924,326 L919,327 L914,327 L909,328 L904,329
L900,329 L895,330 L890,330
如您所见,坐标都具有整数值,Y坐标仅间歇性地更改。结果是一条由许多水平线段组成的线,每个线段与下一个线段之间几乎没有垂直跳跃。如果您将这些坐标更改为小数点后几位数的浮点值,那么您的线条将更加平滑。
以下是一个例子:
<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>