Создание переменной толщины линии в d3.js

полный исходный код по адресу: http://codepen.io/geewhizbang/full/XKLdLE/Создание переменной толщины линии в d3.js

Я хотел бы иметь ширину обводки изменяться по длине змеи. Как раз перед концом змеи ширина хода должна сужаться до нуля.

, но если я пишу функцию, чтобы сделать это, он не знает о «(г)»

 gameBoard.append('path') 
      .attr("id", snakeId) 
      .attr("d", interpolator(data)) 
      .attr('stroke-width', snakeStroke + 2) 
      .attr('fill', 'none') 
      .attr('stroke', config.snakeOutlineColor); 

     gameBoard.append('path') 
      .attr("d", interpolator(data)) 
      .attr('stroke-width', snakeStroke) 
      .attr('fill', 'none') 
      .attr('stroke', config.snakeColor);

источник

2016-09-09 GeeWhizBang

Создать путь, который имеет линии, нарисовать контур змеи, а затем заполнить его , –

Вы говорите, что невозможно динамически изменять толщину хода по пути? – GeeWhizBang

вы можете попробовать использовать градиент или фильтр (или оба) для создания эффекта – danimal

Вы можете использовать маркеры в начале и в конце, чтобы сделать вашу голову и хвост, и можно взломать ход переменной ширины, используя тщательно разработанную комбинацию штрих-дашара и фильтр - вот пример.

(Но, как Роберт говорит, что выше - это проще всего нарисовать путь и заполнить его!)

<svg width="800px" height="600px" color-interpolation-filters="sRGB" viewBox="0 0 1500 1000"> 
 
    <defs> 
 
    <filter id="var-width"> 
 
     
 
     <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur-source"/> 
 
    
 
     <feComponentTransfer result="clipper"> 
 
     <feFuncA type="table" tableValues="0 1 1 1 1"/> 
 
     </feComponentTransfer> 
 
     
 
     <feComponentTransfer result="clipper2"> 
 
     <feFuncA type="table" tableValues="0 1 1 1 1"/> 
 
     </feComponentTransfer> 
 
      
 
    
 
    </filter> 
 
    </defs> 
 

 
<g filter="url(#var-width)"> 
 
      
 
     <path fill="none" stroke="red" stroke-width="10" stroke-dasharray="40,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1" 
 
     d="m 1258.5,638.2714 c -7.5386,-1.87182 -33.9939,-11.02201 -39.8682,-13.78935 -11.8775,-5.59544 -20.9684,-11.05227 -23.0439,-13.8322 -1.8443,-2.47024 -1.8682,-2.8389 -0.3852,-5.94882 1.0032,-2.10363 4.2273,-5.10701 8.8214,-8.21732 11.269,-7.62954 15.6404,-12.9223 17.3957,-21.06234 0.3651,-1.69325 -0.03,-25.31825 -0.8777,-52.5 -2.9735,-95.33422 -3.586,-124.03659 -4.2229,-197.87915 l -0.6421,-74.45779 -4.4256,4.95779 c -2.4341,2.72678 -10.6977,12.60778 -18.3636,21.95778 -7.6659,9.35 -15.6811,18.8 -17.8115,21 -3.7423,3.86447 -5.8767,7.72575 -7.7291,13.98218 -0.5779,1.95206 -1.8586,3.3253 -3.7074,3.9755 -2.3893,0.84027 -3.7801,0.48275 -9.0266,-2.32045 -8.9188,-4.76521 -22.7502,-15.29413 -32.8795,-25.02886 -10.012,-9.622 -13.0072,-13.87833 -12.5523,-17.83719 0.318,-2.76657 0.3347,-2.77224 10.0705,-3.40751 5.7327,-0.37406 10.6786,-1.2287 12,-2.07356 20.5761,-13.15527 52.0465,-32.92983 65.9619,-41.44744 l 17.7139,-10.84267 0.4224,-92 c 0.2504,-54.531463 0.043,-94.036334 -0.5086,-97 -0.5121,-2.75 -1.1944,-6.287354 -1.5161,-7.860787 -0.3838,-1.876808 -0.1104,-3.161369 0.7947,-3.734687 4.1441,-2.624742 27.1746,0.346621 56.2384,7.255796 18.3348,4.35864 20.3214,7.159946 11.9848,16.899447 -5.1909,6.064358 -8.5251,12.824946 -10.2015,20.685129 -2.7521,12.903832 -3.6418,68.318932 -3.6248,225.755102 0.016,151.69554 0.5864,197.15726 3.6505,291.17828 1.3097,40.18569 0.6939,51.75256 -3.1568,59.30055 -2.463,4.82796 -4.6906,5.73771 -10.5108,4.29257 z M 532.94465,619.5607 c -4.15545,-2.42174 -15.1636,-10.04526 -24.46257,-16.94116 -25.33227,-18.78581 -38.63045,-24.60698 -51.43828,-22.5167 -3.04909,0.49762 -15.4438,2.0654 -27.5438,3.48397 -38.21518,4.48022 -68.73764,11.51345 -79.36797,18.2886 -3.46987,2.21149 -11.54542,1.96514 -14.1972,-0.4331 -2.39051,-2.16195 -5.31837,-7.55542 -6.28168,-11.5716 -0.34686,-1.4461 -2.37798,-5.50543 -4.51359,-9.02072 C 319.2275,571.11854 307.71914,547.86135 302.45162,535 290.2059,505.10051 280.70789,474.83194 271.4532,436.21324 c -2.46647,-10.29228 -5.60245,-22.18503 -6.96885,-26.42833 -3.05313,-9.48144 -3.07894,-11.03333 -0.23435,-14.09542 1.6445,-1.77024 4.13376,-2.74576 9.25,-3.625 3.85,-0.66163 12.48987,-2.98822 19.19971,-5.1702 20.65457,-6.71668 52.31498,-13.02081 102.30029,-20.36975 9.625,-1.41509 26.73197,-4.11437 38.01548,-5.99841 64.6974,-10.8027 110.88469,-13.04319 132.66359,-6.43538 15.29655,4.64104 27.54679,9.41596 40.82093,15.91123 20.81828,10.18676 30.41695,19.72863 30.47804,30.29768 0.0254,4.40096 -0.82411,6.17957 -8.45451,17.70034 -6.5974,9.9611 -15.99703,28.94651 -20.299,41 -1.66854,4.675 -6.49294,19.3 -10.7209,32.5 -12.29635,38.39015 -32.82397,92.80004 -43.39456,115.02032 -4.65253,9.78003 -10.1609,17.49788 -12.46266,17.46162 -0.63053,-0.01 -4.54632,-1.99949 -8.70176,-4.42124 z M 507.6904,564.56385 c 3.36684,-1.56758 6.3121,-3.93564 8.38311,-6.74023 14.27335,-19.3292 33.07756,-85.5587 36.86017,-129.82362 1.05006,-12.2881 0.28669,-22.17788 -2.16272,-28.01867 -2.9387,-7.00755 -12.30976,-11.92715 -26.73793,-14.03683 -9.55212,-1.3967 -34.74526,-0.82738 -50.23629,1.13526 l -9.70326,1.22936 -1.6437,4.09544 c -2.19389,5.4663 -3.38973,18.68898 -3.42268,37.84544 L 459,446 l 3.01585,0 c 1.65872,0 9.19622,-1.62912 16.75,-3.62027 10.0126,-2.63928 16.59405,-3.75578 24.28843,-4.12038 10.11135,-0.47914 10.67373,-0.39737 13.40081,1.94837 l 2.84654,2.44848 -1.42172,10.33843 c -0.81276,5.91022 -1.15552,12.94414 -0.80023,16.4219 0.73892,7.233 -0.1094,9.28011 -4.62805,11.16813 -4.10035,1.71323 -9.91944,1.78683 -21.71115,0.27461 -8.5037,-1.09056 -15.69315,-0.65103 -29.59766,1.80945 l -3.35717,0.59407 0.48672,25.61861 c 0.26769,14.09023 0.91941,26.9686 1.44826,28.6186 l 0.96154,3 8.40891,-0.45591 c 18.09353,-0.981 19.98363,-0.80409 22.13904,2.07209 1.25506,1.67476 2.2596,5.27322 2.79158,10 0.98163,8.72206 2.2089,12.3393 4.67286,13.7727 2.54423,1.48009 3.16849,1.38814 8.99584,-1.32503 z M 371,556.98657 c 14.51804,-2.22981 34.99616,-7.39833 35.45257,-8.94796 0.77825,-2.64242 2.47372,-23.86076 3.17935,-39.78861 0.59209,-13.36514 0.48502,-15.25 -0.8663,-15.25 -1.70191,0 -17.52785,4.39734 -22.26562,6.18664 -1.65,0.62315 -4.37197,2.13994 -6.04883,3.37063 -9.86604,7.24099 -19.23389,3.83236 -26.39563,-9.60445 -8.38482,-15.73153 -9.83765,-28.90854 -3.50542,-31.7937 1.39919,-0.63752 6.68531,-1.18318 11.74693,-1.21258 5.28594,-0.0307 17.71547,-1.42209 29.20295,-3.26901 l 20,-3.21555 -0.19841,-13.11095 c -0.22114,-14.61265 -2.4427,-29.58932 -5.37538,-36.23819 l -1.93509,-4.38716 -5.33458,0.62698 c -8.19745,0.96345 -28.46102,6.31301 -37.78468,9.97511 -10.27121,4.03428 -21.46384,10.4748 -25.65705,14.76372 -4.21885,4.31514 -4.72008,7.99356 -4.68856,34.40851 0.0286,23.99296 1.17779,34.00167 6.42471,55.95682 3.66388,15.33106 10.78116,37.4891 12.76385,39.73731 2.47655,2.80822 10.35298,3.4715 21.28519,1.79244 z m -192.5,52.07042 c -2.75,-0.44007 -8.825,-1.83696 -13.5,-3.1042 -9.01886,-2.4447 -14,-5.94484 -14,-9.83748 0,-1.1212 2.09783,-4.19332 4.66185,-6.82693 9.14276,-9.39091 8.36954,-1.04132 10.08162,-108.86508 0.83197,-52.39661 1.21232,-96.4633 0.84521,-97.92598 -0.62116,-2.47491 -1.62289,-1.45695 -14.43843,14.67242 -12.24875,15.41601 -25.51283,30.49588 -42.22916,48.01011 -15.805655,16.5601 -38.698015,35.15284 -50.133135,40.71718 -9.454661,4.60066 -16.734211,6.10878 -29.248054,6.05942 -12.737694,-0.0503 -19.055188,-1.04317 -21.3708673,-3.35884 -2.3606342,-2.36064 -0.9444684,-4.077 9.2420843,-11.2C 51.256014,454.42545 85.848748,418.65441 125.17101,367 c 26.5994,-34.94142 43.9835,-62.67912 48.2165,-76.93316 2.07833,-6.99849 2.03097,-8.64836 -0.3156,-10.99493 -1.81047,-1.81047 -2.29576,-1.84231 -7.95512,-0.52207 -21.9096,5.11116 -76.799404,29.84746 -80.537391,36.29448 -5.770496,9.95256 -13.808146,7.56946 -20.732148,-6.14691 C 60.069722,301.21416 50.62515,276.20122 48.542824,268.16526 46.702614,261.06366 46.527228,251.87277 48.2,250.2 c 1.526426,-1.52643 5.465848,-1.46571 9.234478,0.14231 5.426073,2.31524 16.836196,0.18446 50.065522,-9.34949 34.99184,-10.03965 58.31512,-18.74398 89,-33.21513 36.94053,-17.42135 45.89748,-20.67483 50.39879,-18.30663 3.09785,1.62982 8.23103,6.99681 17.72175,18.52894 14.36976,17.46065 15.72533,19.63344 16.18124,25.93641 0.59762,8.26204 -1.1902,11.10767 -9.83151,15.64855 -4.99501,2.62481 -9.10156,5.90525 -14.15358,11.30634 -14.39406,15.38863 -26.02202,30.26181 -34.32841,43.90905 l -3.83471,6.30035 6.92322,7.03788 c 6.55184,6.66036 22.97302,19.1946 32.78171,25.02219 6.78157,4.02911 8.1501,6.78447 8.09447,16.29719 -0.064,10.95168 -3.21715,20.21714 -8.89751,26.1455 -6.18163,6.45151 -10.99073,5.79539 -22.51411,-3.07164 -6.45238,-4.96499 -19.01988,-12.95428 -25.87279,-16.44759 l -4.33145,-2.20798 0.66415,117.31188 c 0.66237,116.99729 0.65868,117.32048 -1.37932,120.52153 -3.9413,6.19055 -14.29582,9.1598 -25.62194,7.34733 z m 596.16667,-57.72366 c -1.34025,-1.34024 -0.61395,-5.58572 1.39865,-8.1756 1.13592,-1.46175 15.21885,-15.93273 31.29539,-32.15773 40.01132,-40.38079 51.96635,-54.89172 62.44398,-75.79403 15.15418,-30.23176 24.95936,-64.15459 31.13172,-107.70597 3.7631,-26.55187 7.17596,-72.08033 5.35063,-71.37872 -2.26256,0.86966 -22.11335,20.27797 -32.60553,31.87872 -18.93188,20.93217 -29.60984,36.06663 -37.43322,53.05615 -7.1,15.41861 -12.50642,16.63894 -23.35792,5.27231 -6.62653,-6.94111 -10.5885,-13.23476 -15.89612,-25.25126 -6.37249,-14.42735 -9.18104,-23.26 -8.80783,-27.69988 0.30658,-3.64731 0.43784,-3.75865 5.88222,-4.98957 3.06275,-0.69245 14.53775,-5.76821 25.5,-11.27946 24.40142,-12.26776 50.51042,-24.10844 71.39675,-32.37912 L 906.6962,238.5 l 0.6519,-8.90362 c 1.03833,-14.18152 0.75507,-97.01461 -0.43434,-127.01103 -0.82278,-20.75009 -0.80325,-27.923313 0.0805,-29.574607 1.82869,-3.41693 7.03768,-5.01455 16.22363,-4.975855 16.21944,0.06832 33.67143,4.610617 40.64347,10.578425 3.65346,3.127231 4.13865,4.043611 4.13865,7.816727 0,2.965264 -0.75778,5.314761 -2.47447,7.672077 -1.36096,1.868836 -2.9683,4.522883 -3.57187,5.897883 -3.7292,8.49552 -6.23899,39.9317 -7.94385,99.5 -1.78581,62.39657 -5.48825,101.86347 -13.06562,139.27555 -5.2089,25.71813 -9.68489,39.9514 -21.45479,68.22445 -12.63846,30.35946 -17.21086,46.57302 -18.4717,65.5 -1.07664,16.16175 -2.79502,22.05084 -7.91855,27.13776 -2.13951,2.12423 -11.35103,8.52406 -20.47003,14.22183 -28.39954,17.74473 -53.04423,29.16439 -75.9241,35.18108 -10.51012,2.76384 -20.52529,3.80572 -22.03835,2.29266 z m 280.71453,-51.86666 c -5.0153,-0.81428 -10.8653,-2.0897 -13,-2.83429 -3.5223,-1.22859 -3.8702,-1.66723 -3.7621,-4.74308 0.066,-1.86412 0.8742,-5.36952 1.797,-7.7898 4.6838,-12.28466 6.6006,-56.55419 6.5328,-150.87754 -0.033,-45.50464 -0.3845,-68.07075 -1.0547,-67.65655 -1.6271,1.00557 -15.2248,18.38911 -20.2779,25.92359 -4.9381,7.36301 -10.1998,17.75499 -13.1701,26.011 -2.2827,6.34478 -6.3268,10.5 -10.2192,10.5 -5.65359,0 -16.67035,-10.33666 -21.58636,-20.25374 -6.69563,-13.5071 -11.98579,-27.42541 -12.06164,-31.73395 -0.079,-4.48626 -0.0777,-4.48787 3.921,-5.08656 2.2,-0.32938 10.975,-4.04715 19.5,-8.2617 8.525,-4.21456 24.275,-11.61337 35,-16.4418 l 19.5,-8.77897 0.1152,-65.76366 0.1151,-65.76367 2.2819,-2.42895 c 3.4733,-3.69712 8.2453,-4.839319 17.415,-4.168334 15.0375,1.100364 38.0875,8.710164 41.8502,13.816574 2.1822,2.96161 2.0984,3.21797 -4.0676,12.44251 -3.7185,5.56288 -5.7292,11.72572 -7.1524,21.92225 -4.8668,34.86857 -9.6988,164.76827 -8.723,234.5 0.7041,50.31166 2.1688,68.28316 7.1976,88.31329 4.157,16.55746 4.4629,23.4185 1.2129,27.19687 -2.2127,2.57238 -2.5371,2.62935 -17.25,3.02935 -10.2785,0.27944 -17.8631,-0.058 -24.1137,-1.07284 z M 373.20218,340.75817 C 368.9436,338.70753 348.23012,308.25683 334.93367,284.5 326.6507,269.70077 317.75024,251.23688 313.2402,239.49716 c -1.69095,-4.40156 -4.23674,-10.31691 -5.65732,-13.14522 -5.66012,-11.26905 -3.18327,-14.56887 12.2142,-16.27258 10.49408,-1.16115 40.32289,-8.29021 88.20292,-21.08041 38.06271,-10.16769 53.52235,-12.9486 72.16203,-12.98063 12.34687,-0.0212 21.00728,1.45859 38.08012,6.50677 26.55738,7.85261 42.37024,15.73243 47.32646,23.58359 4.35799,6.90351 2.99259,11.17418 -6.96667,21.79024 -22.16311,23.62473 -35.89136,49.53278 -41.64942,78.60108 -1.55481,7.84908 -4.48559,13.96403 -7.70312,16.07225 -2.47646,1.62263 -2.92663,1.58198 -10.39371,-0.93857 C 475.81529,313.8563 443.7669,315.93243 406,327.649 c -13.7844,4.27638 -16.22813,5.45563 -21.72766,10.48487 -4.35542,3.98297 -6.96425,4.60142 -11.07016,2.6243 z M 398,284.95799 c 17.80245,-2.03609 42.47792,-6.08994 52.93506,-8.69651 12.22121,-3.04629 16.06415,-5.84129 21.52774,-15.6573 6.96724,-12.51751 10.4397,-24.22223 10.50207,-35.39963 0.0459,-8.23156 -1.78098,-10.12634 -12.57068,-13.03772 -18.18113,-4.90579 -43.40549,-1.87163 -73.88974,8.88797 -18.70405,6.60171 -23.24983,9.76661 -25.46044,17.72625 -1.33797,4.81755 -1.32367,21.90204 0.0253,30.21669 1.86382,11.48819 7.89746,18.59727 14.82735,17.47019 1.43185,-0.23288 6.87836,-0.91235 12.10336,-1.50994 z M 337.0964,160.74822 c -4.03254,-2.09414 -5.99957,-5.8658 -7.65747,-14.68271 -1.95213,-10.3817 -7.58234,-29.16217 -11.50854,-38.38862 -3.63337,-8.538295 -3.70601,-11.599548 -0.35004,-14.752576 2.52009,-2.367691 3.09816,-2.439833 24.75,-3.088745 24.71972,-0.740857 54.26648,-3.683061 74.66965,-7.435446 14.04913,-2.583801 17.11268,-3.299263 46,-10.74284 21.54148,-5.55073 44.18838,-10.137428 57.71096,-11.688261 13.33155,-1.528923 16.32668,-0.309645 20.77904,8.45889 2.83858,5.590314 3.01,6.595803 3.01,17.655461 0,17.681597 1.68629,16.262197 -38.57482,32.469727 -17.83385,7.17921 -39.38019,16.12169 -47.88076,19.87219 -19.74549,8.71183 -26.49289,11.23266 -36.46688,13.62402 -10.25709,2.45925 -18.10915,2.4301 -27.57754,-0.10238 -10.69039,-2.85932 -20.42746,-1.49287 -39.5,5.54321 -11.50683,4.245 -14.44424,4.7949 -17.4036,3.25808 z M 198.08099,147.92077 c -7.38045,-1.56358 -17.85589,-3.50154 -23.27876,-4.30657 -14.34891,-2.13011 -15.59982,-3.08445 -19.59617,-14.95025 -6.99243,-20.76162 -9.21734,-42.521914 -5.72043,-55.947465 3.35123,-12.866247 14.10669,-29.385827 21.68323,-33.303806 3.63646,-1.880487 10.23427,-1.789746 14.42392,0.198374 6.50545,3.087037 12.31161,12.244475 20.85282,32.888947 3.47653,8.402937 9.64416,18.27782 15.65064,25.057999 C 227.79769,103.99385 244,128.3106 244,130.43159 c 0,5.50999 -7.89654,15.6953 -14.5,18.70275 -5.65933,2.57745 -15.27834,2.20591 -31.41901,-1.21357 z" /> 
 
     </g> 
 
</svg>

источник

2016-09-09 17:30:51

Создание переменной толщины линии в d3.js

ответ

Смежные вопросы