79a23a0e.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{"3gQJ":function(K,D,t){"use strict";t.r(D),t.d(D,"default",function(){return W});var l=t("nKUr"),B=t.n(l),R=t("y8nQ"),p=t("Vl3Y"),L=t("giR+"),j=t("fyUT"),P=t("c1Ei"),u=t.n(P),M=t("k16G"),O=t("5Tp6"),g=t("XKWP"),C=t("N7Kx"),b=t("kFHX"),U=t("4jIl"),y=t("q1tI"),A=t.n(y),i=t("VphZ"),W=function(T){Object(b.a)(c,T);var I=Object(U.a)(c);function c(E){var e;return Object(g.a)(this,c),e=I.call(this,E),e.svgWidth=500,e.svgHeight=500,e.drawSvg=Object(O.a)(u.a.mark(function m(){var o,s,a,d,_,f;return u.a.wrap(function(v){for(;;)switch(v.prev=v.next){case 0:o=e.state.count,s=i.select(".polygon-test"),s.selectAll("svg").remove(),a=s.append("svg").attr("width",e.svgWidth).attr("height",e.svgHeight).style("border","1px solid black"),d=10,_=Array(o).fill(0).map(function(){return[Math.random()*(e.svgWidth-d*2)+d,Math.random()*(e.svgWidth-d*2)+d]}),a.append("g").selectAll("circle").data(_).enter().append("circle").attr("cx",function(n){var r=Object(M.a)(n,1),h=r[0];return h}).attr("cy",function(n){var r=Object(M.a)(n,2),h=r[1];return h}).attr("fill","none").attr("stroke",function(n,r){return i.schemeCategory10[Math.ceil(9*r/o)]}).attr("stroke-width",1).transition().duration(500).ease(i.easeCircleOut).attr("r",5),f=i.quadtree(_),a.on("click",function(n){a.selectAll(".click-circle,.near-point").remove(),a.append("circle").attr("class","click-circle").attr("cx",n.layerX).attr("cy",n.layerY).attr("fill","none").attr("stroke","red").attr("stroke-width",1).transition().duration(500).ease(i.easeCircleOut).attr("r",40);var r=f.find(n.layerX,n.layerY,40);r&&(a.append("line").attr("class","near-point").attr("x1",r[0]).attr("y1",r[1]-10).attr("x2",r[0]).attr("y2",r[1]+10).attr("stroke","red").attr("stroke-width",1),a.append("line").attr("class","near-point").attr("x1",r[0]-10).attr("y1",r[1]).attr("x2",r[0]+10).attr("y2",r[1]).attr("stroke","red").attr("stroke-width",1).transition().duration(500).ease(i.easeCircleOut))});case 9:case"end":return v.stop()}},m)})),e.state={count:100},e}return Object(C.a)(c,[{key:"componentDidMount",value:function(){var E=Object(O.a)(u.a.mark(function m(){return u.a.wrap(function(s){for(;;)switch(s.prev=s.next){case 0:return s.next=2,this.drawSvg();case 2:case"end":return s.stop()}},m,this)}));function e(){return E.apply(this,arguments)}return e}()},{key:"render",value:function(){var e=this,m=this.state.count;return Object(l.jsxs)(l.Fragment,{children:[Object(l.jsx)(p.a,{children:Object(l.jsx)(p.a.Item,{label:"\u968F\u673A\u70B9\u6570\u91CF",children:Object(l.jsx)(j.a,{defaultValue:m,min:1,max:1e3,onChange:function(){var o=Object(O.a)(u.a.mark(function s(a){return u.a.wrap(function(_){for(;;)switch(_.prev=_.next){case 0:return _.abrupt("return",e.setState({count:a},e.drawSvg));case 1:case"end":return _.stop()}},s)}));return function(s){return o.apply(this,arguments)}}()})})}),Object(l.jsx)("div",{className:"polygon-test"})]})}}]),c}(A.a.Component)}}]);