代码之家 › 专栏 › 技术社区 › The Old County

D3.js-个人多边形-生成预制多边形,位置,点击时更改颜色-返回点击的多边形和颜色

d3.js javascript

The Old County · 技术社区 · 1 年前

我对制作一个生物医学类型的d3.js应用程序感兴趣——在这个应用程序中,可以制作一个多边形的人。——用户点击表示伤口的部分——红色-严重,琥珀色-轻微——我想创建一个多边形“制造商”/渲染器——它也有两个调色板,允许用户点击——再次点击取消选择/删除颜色。

然后在最后的一个按钮上点击改变颜色的状态来获取d3.js——我认为每个多边形都有代码

所以返回的数据看起来像

[{“code”:“BR234”,“state”:“severe”},{“code”:“TDR234”,“state”:“琥珀色”}]

当前的代码——但我不确定如何正确定位多边形——但也可以很容易地从参考中绘制它们——如果有方法绘制半个人——那么用数学来镜像所需的多边形?

http://jsfiddle.net/cky0n4o3/12/

<script>
  

$(document).ready(function() {

   
  var vis = d3.select("body").append("svg")
    .attr("width", 1000)
    .attr("height", 667);

  var  scaleX = d3.scale.linear()
    .domain([-30, 30])
    .range([0, 600]);

  var  scaleY = d3.scale.linear()
    .domain([0, 50])
    .range([500, 0]);

  var data = [{"code":"BR23", "points": "191,23.5625,274,37.5625,319,101.5625,274,156.5625,170,149.5625,138,81.5625"}, {"code":"FR23", "points": "139,17.5625,324,0.5625,336,77.5625,160,105.5625"}];

    vis.selectAll("polygon")
    .data(data)
    .enter().append("polygon")
    .attr("points", function(d, i) {return d.points})
    .attr("fill", "grey")
    .attr("stroke", "red")
    .attr("stroke-width", 2)
   .on("click", function(d, i) {
      console.log("d", d);
      d3.select(this).style("fill", "blue");
    });


 
});



</script>

用坐标制作多边形? Proper format for drawing polygon data in D3

画出每个线段-如何绘制曲线路径?

https://jsfiddle.net/7pwaLfth/

也许是使用路径的诀窍吗?通过vectormagic运行图像-获得svg-并获得片段的路径?

这是路径点击版本 http://jsfiddle.net/13kgot8u/1/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>


<script>
  

$(document).ready(function() {

   
  var vis = d3.select("body").append("svg")
    .attr("width", 2481)
    .attr("height", 3508)
    .attr("viewBox", "0 0 24810 35080");

  var  scaleX = d3.scale.linear()
    .domain([-30, 30])
    .range([0, 600]);

  var  scaleY = d3.scale.linear()
    .domain([0, 50])
    .range([500, 0]);

  var data = [{"code":"BR23", "path": "M12180 6529 c-119 -32 -256 -86 -380 -150 -361 -186 -616 -472 -745 -832 l-31 -88 -60 -28 c-157 -74 -318 -292 -355 -479 -33 -172 48 -312 182 -312 l44 0 1 -152 c1 -164 17 -283 59 -429 143 -501 554 -912 1054 -1054 92 -26 245 -55 292 -55 l29 0 0 1264 0 1264 -44 11 c-156 39 -323 -11 -457 -136 -59 -55 -62 -42 -13 57 46 91 149 201 235 253 69 40 202 87 250 87 l29 0 0 400 c0 220 -3 400 -7 399 -5 0 -42 -9 -83 -20z m-235 -2059 c43 -11 102 -31 132 -44 47 -22 53 -28 53 -54 0 -25 -8 -35 -47 -60 -188 -120 -375 -127 -530 -20 -33 22 -43 35 -43 57 0 29 43 77 90 102 85 43 220 51 345 19z m-484 -225 c75 -67 202 -115 307 -115 89 0 187 29 309 91 64 32 118 57 121 55 2 -2 -25 -28 -60 -57 -205 -171 -480 -186 -653 -36 -38 33 -84 97 -69 97 3 0 24 -16 45 -35z"}, {"code":"FR23", "path": "M12254 8030 c-125 -63 -210 -127 -313 -235 -194 -205 -346 -510 -441 -881 -54 -210 -109 -546 -98 -598 2 -12 19 3 58 49 113 134 292 264 451 325 144 55 229 71 415 77 257 8 418 -23 613 -121 142 -72 293 -196 394 -326 l27 -35 -6 60 c-67 698 -305 1273 -640 1547 -112 92 -287 188 -342 188 -10 0 -63 -22 -118 -50z"}];

    vis.selectAll("path")
    .data(data)
    .enter().append("path")
    .attr("d", function(d, i) {return d.path})
    .attr("fill", "grey")
    .attr("stroke", "red")
    .attr("stroke-width", 2)
   .on("click", function(d, i) {
      console.log("d", d);
      d3.select(this).style("fill", "blue");
    });


 
});



</script>

0 回复 | 直到 1 年前

The Old County 1 年前

我可以使用png-矢量化它-从svg中获取路径。

http://jsfiddle.net/2bk0mhy7/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>



<script>
  

$(document).ready(function() {

   
  var vis = d3.select("body").append("svg")
    .attr("width", 2481)
    .attr("height", 3508)
    .attr("viewBox", "0 0 24810 35080");

  var  scaleX = d3.scale.linear()
    .domain([-30, 30])
    .range([0, 600]);

  var  scaleY = d3.scale.linear()
    .domain([0, 50])
    .range([500, 0]);

  var data = [
      {
        "code":"BR23", 
        "path": "M12180 6529 c-119 -32 -256 -86 -380 -150 -361 -186 -616 -472 -745 -832 l-31 -88 -60 -28 c-157 -74 -318 -292 -355 -479 -33 -172 48 -312 182 -312 l44 0 1 -152 c1 -164 17 -283 59 -429 143 -501 554 -912 1054 -1054 92 -26 245 -55 292 -55 l29 0 0 1264 0 1264 -44 11 c-156 39 -323 -11 -457 -136 -59 -55 -62 -42 -13 57 46 91 149 201 235 253 69 40 202 87 250 87 l29 0 0 400 c0 220 -3 400 -7 399 -5 0 -42 -9 -83 -20z m-235 -2059 c43 -11 102 -31 132 -44 47 -22 53 -28 53 -54 0 -25 -8 -35 -47 -60 -188 -120 -375 -127 -530 -20 -33 22 -43 35 -43 57 0 29 43 77 90 102 85 43 220 51 345 19z m-484 -225 c75 -67 202 -115 307 -115 89 0 187 29 309 91 64 32 118 57 121 55 2 -2 -25 -28 -60 -57 -205 -171 -480 -186 -653 -36 -38 33 -84 97 -69 97 3 0 24 -16 45 -35z"
      }, 
      {
        "code":"FR23", 
        "path": "M12254 8030 c-125 -63 -210 -127 -313 -235 -194 -205 -346 -510 -441 -881 -54 -210 -109 -546 -98 -598 2 -12 19 3 58 49 113 134 292 264 451 325 144 55 229 71 415 77 257 8 418 -23 613 -121 142 -72 293 -196 394 -326 l27 -35 -6 60 c-67 698 -305 1273 -640 1547 -112 92 -287 188 -342 188 -10 0 -63 -22 -118 -50z"
      }, 
      {
        "code":"FRxcvx23", 
        "path": "M12460 6151 l0 -398 52 -7 c185 -25 370 -162 459 -339 51 -103 50 -120 -4 -64 -127 130 -303 186 -463 146 l-44 -11 0 -1266 0 -1265 83 6 c359 28 769 245 1010 535 231 277 359 607 361 932 1 74 -2 154 -7 178 l-7 42 40 0 c67 0 125 42 166 120 28 53 23 174 -10 270 -59 167 -196 335 -328 400 l-67 32 -26 79 c-67 200 -175 370 -345 539 -175 175 -346 288 -579 380 -78 31 -267 90 -288 90 -2 0 -3 -179 -3 -399z m641 -1688 c67 -30 119 -79 119 -113 0 -22 -10 -34 -46 -59 -153 -101 -347 -98 -511 8 -70 45 -77 54 -69 86 5 18 22 29 82 51 123 45 172 54 279 51 75 -2 111 -8 146 -24z m-469 -233 c122 -64 195 -89 284 -97 129 -11 278 40 367 125 17 16 27 21 27 12 0 -8 -28 -42 -63 -76 -77 -75 -146 -104 -262 -111 -95 -6 -188 13 -273 56 -80 40 -207 141 -178 141 2 0 46 -23 98 -50z"
      }, 
      {
        "code":"567566", 
        "path": "M15136 9422 c-2 -4 -20 -47 -41 -97 -273 -663 -794 -1104 -1492 -1260 -183 -41 -323 -57 -523 -59 l-185 -1 75 -61 c284 -230 502 -668 537 -1079 l6 -75 23 56 c34 84 88 161 169 239 137 134 224 168 455 179 381 19 708 104 1045 271 482 238 908 620 1222 1097 67 101 82 131 75 145 -20 36 -140 142 -223 196 -109 71 -288 161 -464 232 -225 92 -669 233 -679 217z"
      }, 
      {
        "code":"fhgfghfg", 
        "path": "M9570 9404 c-632 -184 -1124 -423 -1260 -614 l-20 -27 89 -134 c48 -74 125 -181 171 -239 100 -126 391 -420 510 -514 223 -178 543 -363 781 -450 267 -98 498 -143 839 -165 202 -13 275 -42 408 -166 77 -71 145 -164 176 -241 l24 -58 7 65 c33 300 145 607 300 825 61 84 224 255 288 300 l27 19 -177 1 c-275 1 -502 37 -750 119 -543 179 -949 532 -1204 1048 -38 76 -78 165 -90 197 -12 33 -24 60 -28 59 -3 0 -44 -11 -91 -25z"
      }, 
      {
        "code":"34534534", 
        "path": "M15701 12058 c-143 -383 -283 -903 -320 -1188 -5 -41 -13 -136 -16 -210 -14 -303 -68 -574 -162 -813 -19 -49 -32 -91 -29 -95 4 -3 111 -40 239 -82 587 -194 1013 -401 1184 -575 l61 -63 30 111 c157 574 285 1221 342 1722 18 165 46 613 38 619 -16 14 -233 139 -353 204 -332 179 -669 315 -947 381 -60 14 -57 15 -67 -11z"
      }, 
      {
        "code":"575765", 
        "path": "M8965 12050 c-323 -84 -711 -258 -1134 -508 l-94 -56 6 -200 c9 -283 42 -573 107 -953 62 -353 164 -817 253 -1145 l42 -157 65 66 c150 151 468 317 938 489 96 35 240 84 320 109 81 25 152 48 159 50 8 3 0 32 -23 92 -97 246 -148 495 -164 804 -14 272 -56 498 -156 853 -64 230 -185 586 -198 586 -6 -1 -60 -14 -121 -30z"
      }, 
      {
        "code":"jkljk", 
        "path": "M15030 12769 c-450 -201 -1173 -408 -2003 -574 -150 -29 -332 -64 -404 -76 l-133 -23 0 -1911 0 -1912 48 -7 c272 -39 590 -47 802 -21 551 68 1009 330 1283 734 267 395 431 1201 511 2511 30 477 55 1340 40 1340 -5 -1 -70 -28 -144 -61z"
      }, 
      {
        "code":"5756756", 
        "path": "M12568 15913 l-78 -4 0 -1744 0 -1745 28 0 c41 0 230 18 372 36 659 81 1470 290 2190 562 l155 59 2 59 c25 631 101 1164 206 1444 l36 95 -26 34 c-49 64 -218 234 -322 324 -575 496 -1277 794 -2041 866 -126 12 -415 20 -522 14z"
      }, 
      {
        "code":"576575", 
        "path": "M11805 15909 c-764 -43 -1482 -317 -2073 -792 -126 -102 -345 -311 -414 -397 l-37 -46 34 -85 c101 -252 178 -756 203 -1341 4 -92 10 -169 12 -171 11 -9 332 -126 535 -194 710 -239 1416 -395 2040 -453 61 -5 122 -10 138 -10 l27 0 0 1743 0 1744 -112 6 c-127 8 -154 7 -353 -4z"
      }, 
      {
        "code":"5465", 
        "path": "M9586 12607 c29 -1365 118 -2302 279 -2947 119 -478 279 -762 559 -998 260 -218 552 -346 931 -409 159 -26 595 -26 783 1 l132 19 0 1912 0 1913 -47 7 c-244 35 -915 176 -1272 266 -523 133 -1057 311 -1303 435 l-67 34 5 -233z"
      }, 
      {
        "code":"575765hg", 
        "path": "M16767 15903 c-394 -942 -659 -1735 -742 -2228 -14 -81 -24 -149 -23 -150 2 -1 65 -16 141 -34 507 -120 1005 -338 1226 -537 l49 -44 31 127 c79 332 133 856 161 1553 28 697 77 1153 140 1283 25 51 25 50 -5 45 -42 -8 -355 10 -455 26 -195 32 -331 85 -390 153 -16 18 -31 33 -33 33 -3 0 -47 -102 -100 -227z"
      }, 
      {
        "code":"567567", 
        "path": "M17965 18348 c-29 -17 -41 -35 -60 -97 -9 -31 -53 -171 -97 -311 -45 -140 -100 -320 -124 -400 -23 -80 -43 -136 -43 -125 -1 30 46 482 65 630 19 145 14 209 -18 251 -40 50 -139 71 -186 38 -25 -17 -54 -70 -71 -129 -9 -29 -81 -622 -92 -755 -1 -8 -5 -1 -9 15 -4 17 -8 89 -9 160 -3 283 -35 370 -143 394 -48 11 -98 -7 -124 -46 -39 -58 -48 -145 -38 -372 5 -114 9 -258 8 -321 0 -111 -2 -120 -49 -255 -48 -136 -49 -143 -50 -255 0 -86 5 -129 19 -170 93 -277 316 -460 606 -500 55 -8 97 -8 144 0 227 36 395 171 666 535 73 99 159 212 191 250 108 132 124 196 68 260 -60 68 -131 84 -196 44 -18 -12 -99 -95 -179 -185 -81 -91 -148 -163 -150 -161 -7 7 199 460 367 808 114 237 131 295 104 352 -37 79 -130 110 -192 65 -51 -39 -80 -80 -164 -239 -186 -352 -279 -517 -279 -497 0 10 73 245 172 558 95 298 106 356 75 403 -35 53 -159 85 -212 55z"
      }, 
      {
        "code":"5756756gfh", 
        "path": "M13873 22052 l-62 -3 24 -64 c145 -385 271 -1146 354 -2140 64 -755 101 -1562 124 -2675 l2 -104 155 -67 c85 -37 359 -155 609 -262 l454 -196 -6 527 c-6 511 -10 611 -42 1002 -93 1121 -340 2399 -682 3530 -41 137 -72 224 -86 239 -67 73 -235 148 -411 182 -87 17 -136 22 -326 32 -25 1 -73 1 -107 -1z"
      }, 
      {
        "code":"5756756gfh", 
        "path": "M12823 22124 c-13 -3 -25 -15 -28 -27 -7 -35 -328 -4077 -324 -4082 9 -8 1594 -775 1603 -775 11 0 1 1271 -13 1560 -70 1403 -197 2340 -416 3069 -63 208 -68 219 -107 226 -133 22 -652 43 -715 29z"
      }, 
      {
        "code":"fghfghgf546", 
        "path": "M13300 23800 c-52 -5 -168 -19 -257 -31 l-163 -22 0 -703 c0 -387 1 -704 3 -704 1 0 52 7 112 15 61 8 196 18 300 21 441 15 878 -55 1273 -203 52 -19 95 -33 96 -31 1 2 -3 68 -10 148 -37 421 -37 908 0 1102 16 85 18 82 -79 155 -151 114 -383 200 -646 239 -124 18 -495 26 -629 14z"
      }, 
      {
        "code":"353dfgdf", 
        "path": "M13780 28207 c0 -3 7 -37 14 -75 69 -325 140 -1649 176 -3272 6 -256 13 -551 16 -657 l6 -191 72 -7 c265 -24 438 -71 560 -153 l46 -31 9 37 c19 68 50 266 60 377 60 638 -29 1675 -249 2922 -71 399 -156 816 -173 850 -57 107 -233 188 -439 200 -54 3 -98 3 -98 0z"
      }, 
      {
        "code":"54654gfhhg", 
        "path": "M13325 28206 c-110 -21 -156 -38 -165 -60 -5 -12 -20 -149 -35 -306 -14 -157 -50 -550 -80 -875 -107 -1159 -187 -2112 -214 -2565 -6 -91 -13 -208 -17 -261 l-5 -96 52 8 c30 5 135 13 235 19 179 10 475 1 618 -19 l59 -8 -6 1091 c-5 1022 -11 1314 -37 1861 -25 532 -70 1001 -113 1170 l-12 50 -105 2 c-58 1 -136 -4 -175 -11z"
      }, 
      {
        "code":"dfgfd345", 
        "path": "M13846 29178 c-3 -51 -10 -230 -16 -398 -6 -168 -12 -323 -14 -345 l-3 -41 106 -1 c121 -1 210 -20 290 -64 l54 -29 -6 63 c-20 209 -30 549 -19 667 6 69 14 135 18 148 6 22 5 22 -87 22 -107 0 -208 19 -268 49 -22 12 -42 21 -44 21 -3 0 -7 -42 -11 -92z"
      }, 
      {
        "code":"4565465", 
        "path": "M13430 31430 c-93 -12 -253 -45 -334 -70 -66 -21 -110 -58 -141 -120 -15 -28 -17 -50 -12 -127 15 -217 88 -474 177 -619 99 -162 131 -322 129 -645 -1 -112 -4 -235 -8 -274 -8 -83 1 -117 34 -135 20 -11 37 -9 117 13 129 36 204 47 338 47 134 0 205 -10 327 -47 48 -14 99 -26 113 -26 37 2 56 34 69 120 17 106 58 273 88 358 34 95 67 158 120 233 113 160 183 415 183 671 0 109 -16 143 -118 248 -233 242 -524 367 -876 378 -72 2 -165 0 -206 -5z"
      }, 
      {
        "code":"4565465", 
        "path": "M13572 29239 c-73 -34 -191 -59 -275 -59 l-79 0 5 -32 c26 -147 31 -575 8 -696 -8 -42 -8 -43 13 -37 11 3 61 13 109 22 79 14 97 14 160 1 40 -8 80 -18 90 -22 16 -8 17 16 17 418 0 234 -1 426 -2 425 -2 0 -22 -10 -46 -20z"
      }, 
      {
        "code":"54654fhgfghgf", 
        "path": "M14735 31571 c-101 -45 -195 -212 -195 -344 0 -41 5 -53 30 -79 25 -24 36 -29 58 -23 127 31 258 263 222 394 -17 63 -54 80 -115 52z"
      }, 
      {
        "code":"fghfghf4", 
        "path": "M10985 31434 c-143 -20 -192 -30 -275 -56 -110 -35 -226 -90 -325 -156 -80 -53 -263 -230 -291 -282 -38 -69 -17 -344 41 -543 30 -103 59 -164 126 -263 90 -132 152 -300 194 -531 35 -189 45 -198 163 -159 220 74 478 76 712 6 78 -23 103 -20 126 15 13 21 14 43 3 187 -22 302 6 594 72 743 7 17 30 57 51 91 83 133 144 332 173 562 16 125 16 136 0 177 -32 85 -66 112 -184 146 -160 46 -469 80 -586 63z"
      }, 
      {
        "code":"fghgffg", 
        "path": "M11080 28835 c0 -234 2 -425 4 -425 2 0 23 7 47 16 60 23 206 23 283 0 32 -9 60 -16 62 -14 1 2 -2 37 -8 78 -10 74 -5 492 8 628 l6 62 -79 0 c-82 0 -176 20 -270 59 l-53 21 0 -425z"
      }, 
      {
        "code":"fghfg456546", 
        "path": "M10824 29258 c-56 -33 -180 -58 -285 -58 l-98 0 11 -32 c24 -77 17 -736 -9 -846 -5 -23 -5 -23 53 7 84 43 173 63 291 65 94 1 103 3 103 20 0 25 -29 757 -32 817 l-3 45 -31 -18z"
      }, 
      {
        "code":"4565ghjg", 
        "path": "M11091 28183 c-98 -382 -160 -1746 -161 -3529 l0 -610 63 7 c236 29 582 30 836 3 l64 -7 -7 154 c-27 609 -321 3943 -349 3961 -47 30 -212 58 -344 58 l-92 0 -10 -37z"
      }, 
      {
        "code":"465hgjhgj", 
        "path": "M10698 28190 c-155 -32 -266 -99 -307 -183 -33 -68 -170 -782 -255 -1327 -73 -467 -133 -966 -166 -1390 -6 -74 -14 -288 -17 -475 -7 -427 9 -663 63 -918 17 -76 17 -77 38 -62 120 87 338 151 582 170 l81 7 7 361 c35 1864 114 3442 190 3780 l13 57 -71 -1 c-39 0 -110 -9 -158 -19z"
      }, 
      {
        "code":"dfgfd4556", 
        "path": "M10885 23800 c-347 -36 -673 -157 -813 -303 l-33 -34 16 -94 c33 -193 30 -710 -6 -1108 -6 -62 -9 -115 -6 -117 2 -2 52 14 111 36 208 79 476 143 741 176 235 30 706 24 903 -12 l32 -6 -2 703 -3 703 -75 13 c-252 42 -668 63 -865 43z"
      }, 
      {
        "code":"dfgfd4556", 
        "path": "M11465 22124 c-375 -34 -327 -16 -369 -143 -298 -903 -466 -2395 -470 -4188 0 -298 2 -544 5 -548 5 -4 1530 727 1606 769 4 2 -328 4101 -333 4106 -6 6 -378 9 -439 4z"
      }, 
      {
        "code":"dfgfd4556", 
        "path": "M10625 22049 c-258 -14 -460 -74 -600 -179 -36 -27 -55 -49 -63 -76 -170 -527 -339 -1189 -466 -1825 -164 -816 -260 -1544 -307 -2344 -14 -224 -19 -1058 -7 -1070 5 -5 1178 491 1205 510 2 1 7 197 13 436 50 2164 211 3737 455 4438 20 57 35 104 33 106 -9 7 -158 10 -263 4z"
      }, 
      {
        "code":"dfgf435d4556", 
        "path": "M13181 17401 c38 -109 148 -478 188 -631 66 -254 103 -449 126 -672 5 -40 11 -58 20 -58 23 0 292 -86 426 -135 598 -223 1078 -503 1457 -852 l89 -82 17 137 c44 366 64 907 42 1162 l-8 95 -1130 520 c-622 286 -1156 532 -1188 546 l-58 27 19 -57z"
      }, 
      {
        "code":"ddfg5d4556", 
        "path": "M10410 16910 l-1185 -546 -8 -79 c-10 -105 -2 -781 12 -915 17 -170 42 -374 47 -389 3 -9 37 18 97 76 242 234 546 436 949 633 278 135 596 259 858 333 l85 25 2 38 c18 280 149 832 307 1293 14 41 25 75 23 76 -1 1 -535 -244 -1187 -545z"
      }, 
      {
        "code":"ddfg5d4556", 
        "path": "M12290 17796 c-225 -133 -404 -335 -542 -611 -148 -296 -231 -627 -263 -1059 l-7 -89 35 22 c99 61 302 123 475 146 147 19 635 20 781 1 175 -23 352 -77 469 -141 l42 -24 0 42 c0 23 -7 104 -15 180 -78 738 -350 1265 -787 1528 -45 27 -88 49 -97 49 -9 0 -50 -20 -91 -44z"
      }, 
      {
        "code":"dddfg556", 
        "path": "M15990 13160 c0 -141 -48 -422 -100 -583 -16 -50 -50 -132 -74 -182 -24 -49 -44 -90 -43 -91 1 -1 63 -20 137 -44 446 -140 927 -372 1106 -533 l50 -45 12 111 c30 269 118 596 211 782 28 54 47 102 43 105 -5 3 -53 37 -107 76 -248 178 -539 325 -790 401 -117 35 -235 53 -346 53 l-99 0 0 -50z"
      }, 
      {
        "code":"dddfg556", 
        "path": "M8504 13190 c-206 -41 -464 -147 -702 -289 -140 -83 -321 -207 -328 -225 -3 -7 16 -55 41 -106 90 -179 177 -495 205 -750 7 -58 14 -111 16 -118 2 -8 25 5 61 35 210 171 607 362 1068 514 88 29 161 53 163 55 2 1 -15 37 -36 80 -96 191 -156 438 -178 732 l-7 92 -106 -1 c-59 0 -146 -9 -197 -19z"
      }, 
      {
        "code":"ddfgdfg556", 
        "path": "M7906 16102 c-62 -71 -180 -121 -366 -153 -116 -20 -437 -41 -486 -31 l-26 5 20 -39 c65 -128 116 -568 142 -1219 25 -618 59 -1024 115 -1375 25 -155 73 -370 81 -370 3 0 35 24 72 54 248 200 673 386 1162 507 96 24 176 44 178 45 7 4 -20 160 -54 320 -83 392 -267 954 -529 1616 -94 238 -273 670 -279 674 0 0 -14 -15 -30 -34z"
      }, 
      {
        "code":"dfg435", 
        "path": "M6695 18346 c-17 -7 -43 -28 -58 -45 -42 -51 -37 -89 54 -378 131 -414 180 -576 176 -586 -3 -9 -217 380 -287 523 -79 158 -149 230 -223 230 -33 0 -46 -7 -83 -44 -40 -40 -44 -48 -44 -93 0 -67 10 -92 143 -370 155 -321 338 -724 335 -735 -2 -5 -58 53 -125 130 -192 219 -222 241 -299 229 -66 -11 -134 -82 -134 -139 1 -38 34 -99 91 -168 29 -35 120 -154 203 -265 223 -299 365 -433 534 -501 296 -119 684 48 837 361 53 108 68 181 62 305 -4 93 -10 120 -53 240 l-48 135 4 155 c3 85 5 250 5 365 0 190 -2 214 -20 249 -40 79 -116 102 -190 56 -69 -43 -93 -155 -95 -455 -2 -167 -15 -108 -50 215 -39 363 -48 423 -72 487 -35 95 -109 127 -195 86 -73 -34 -93 -112 -69 -268 8 -55 27 -217 41 -360 14 -143 28 -271 31 -285 3 -15 2 -21 -3 -15 -5 6 -22 55 -37 110 -15 55 -61 204 -101 330 -40 127 -90 284 -110 349 -45 146 -62 166 -137 166 -29 -1 -67 -7 -83 -14z"
      }, 
      {
        "code":"dfg435", 
        "path": "M14444 31796 c-126 -55 -224 -355 -144 -441 93 -99 270 131 258 337 -3 62 -7 73 -31 94 -32 27 -40 28 -83 10z"
      },
      {
        "code":"dfgdfg435", 
        "path": "M14106 31979 c-138 -108 -158 -499 -25 -499 84 0 169 169 169 337 0 148 -67 223 -144 162z"
      },
      {
        "code":"dfgfgh35", 
        "path": "M13730 32084 c-92 -78 -144 -314 -97 -437 64 -165 224 -5 244 243 13 171 -59 267 -147 194z"
      },
      {
        "code":"sdfgh35", 
        "path": "M13225 32154 c-103 -35 -166 -175 -143 -319 29 -184 176 -270 287 -169 61 54 86 121 86 229 0 79 -4 97 -28 148 -47 94 -125 138 -202 111z"
      },
      {
        "code":"sdfgh35", 
        "path": "M11395 32154 c-139 -47 -195 -267 -108 -425 61 -112 168 -139 252 -63 61 54 86 121 86 229 0 79 -4 97 -28 148 -47 94 -125 138 -202 111z"
      },
      {
        "code":"sdfgh35", 
        "path": "M10872 32087 c-31 -32 -42 -78 -42 -167 0 -171 84 -340 169 -340 106 0 123 255 29 432 -50 94 -111 123 -156 75z"
      },
      {
        "code":"sdfgh35", 
        "path": "M10512 31993 c-22 -9 -52 -81 -58 -140 -7 -69 15 -181 49 -256 56 -124 142 -154 187 -67 56 110 19 327 -73 427 -38 42 -67 52 -105 36z"
      },
      {
        "code":"sdfdfg35", 
        "path": "M10193 31798 c-25 -12 -53 -74 -53 -118 0 -150 122 -350 213 -350 41 0 61 20 76 77 30 112 -55 320 -154 378 -46 28 -50 28 -82 13z"
      },
      {
        "code":"sdfdf35", 
        "path": "M9880 31562 c-25 -26 -30 -38 -30 -80 0 -107 61 -236 147 -312 78 -69 141 -61 163 21 27 100 -57 293 -158 362 -61 42 -87 44 -122 9z"
      }

    ];


  // Add color pickers

  var currentColor = "red"

  vis.append('circle')
    .attr('cx', 400)
    .attr('cy', 100)
    .attr('r', 250)
    .attr('stroke', 'black')
    .attr('fill', 'red')
    .on("click", function(d, i) {
      currentColor= "red"
    });

  vis.append('circle')
    .attr('cx', 1000)
    .attr('cy', 100)
    .attr('r', 250)
    .attr('stroke', 'black')
    .attr('fill', 'yellow')
    .on("click", function(d, i) {
      currentColor= "yellow"
    });




  // Add person path
  vis.selectAll("path")
    .data(data)
    .enter().append("path")
    .attr("data-code", function(d, i) {return d.code})
    .attr("data-severity", "")
    .attr("d", function(d, i) {return d.path})
    .attr("fill", "grey")
    .attr("stroke", "red")
    .attr("stroke-width", 2)
    .on("click", function(d, i) {
      console.log("d", d);


      var text = d3.select(this);
      if (text.classed("selectedText")) {
        text.classed("selectedText", false);
        //Remove class selectedNode
        d3.select(this).style("fill", "grey");
      } else {
        text.classed("selectedText", true);    
        //Adds class selectedNode
        d3.select(this).style("fill", currentColor);

        d3.select(this).attr("data-severity", currentColor);
      }
      getSelectedPaths()

      
    });


    function getSelectedPaths() {
      const pathsWithClass = vis.selectAll("path")
        .filter(function() {
          return d3.select(this).classed("selectedText")
        });

      console.log("pathsWithClass: " , pathsWithClass)

      console.log("Elements with class: " , pathsWithClass.size())


      let pathsArray = pathsWithClass[0];

      var jsonBlob = [];

      for (let i = 0; i < pathsArray.length; i++) {
        console.log("pathsWithClass xxx ", pathsArray[i]);

        console.log("severity", d3.select(pathsArray[i]).attr("data-severity"))
        console.log("code", d3.select(pathsArray[i]).attr("data-code")) 

        var jsonObj = {
          "code": d3.select(pathsArray[i]).attr("data-code"),
          "severity": d3.select(pathsArray[i]).attr("data-severity")
        }
        jsonBlob.push(jsonObj);

      }
      console.log("jsonBlob: " , jsonBlob)


    }




});



function myFunction(){
  console.log("clicked me")
  //return data from d3 

  //console.log("paths", vis.selectAll("path"))
 //d3.selectAll("path")

}


</script>



<button onclick="myFunction()">Click me</button>