finiteStateMachine/ten_states.html at master · gberrante/finiteStateMachine · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<html lang='en'>
<head>
   <meta charset='UTF-8'>
   <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <script src = 'https://d3js.org/d3.v4.min.js'></script>
   <style>
      head,body,div{
         user-select: none; /* standard syntax */
         -webkit-user-select: none; /* webkit (safari, chrome) browsers */
         -moz-user-select: none; /* mozilla browsers */
         -khtml-user-select: none; /* webkit (konqueror) browsers */
         -ms-user-select: none; /* IE10+ */
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
         background-color:white;
         text-align: center;
      }
      .active {
        stroke: rgb(255, 39, 93);
        stroke-width: 3px;
        stroke-opacity: 1;
      }
      .activeS {
        fill: rgb(255, 39, 93);
        fill-opacity: 1;
      }
      .over {
         stroke:rgb(59, 232, 255);
         stroke-width: 3px;
         stroke-opacity: 1;
      }
      .overS {
         fill: rgb(59, 232, 255);
         fill-opacity: 1;
      }
   </style>
</head>
<body>
   <div id='tavola'></div>

   <script>
   var radiusCircle = innerWidth/2.5;

      var svg = d3.select('#tavola').append('svg');
      svg.attr('width','100%');
      svg.attr('height','100%');

      var groups = [];
      var dataidx = [0,1,2,3,4,5,6,7,8,9];
      for (let i = 0; i < dataidx.length; i++) {
         groups.push(svg.append('g'));
      }

      for (let i = 0; i < groups.length; i++) {
         groups[i].append('circle')
         .attr('r','40px')
         .attr('cx',function (){
            var x0 = Math.round(innerWidth/2);
            return x0+radiusCircle*Math.cos(6.28/10.0*i);
         })
         .attr('cy',function (){
            var y0 = Math.round(innerHeight/2);
            return y0+radiusCircle*Math.sin(6.28/10.0*i);
         })
         .attr('fill','lightgrey')
         .attr('fill-opacity',0.2);

         groups[i].append('text')
         .attr('transform',function (){
            var angle = 6.28/10.0*i;
            var x0 = Math.round(innerWidth/2)+radiusCircle*Math.cos(angle);
            var y0 = Math.round(innerHeight/2)+radiusCircle*Math.sin(angle);

            var out = 'translate('+x0.toString()+','+y0.toString()+')';
            var rotation = (angle*180/3.14);
            rotation = (rotation>=180)? rotation-180:rotation;
            rotation = (rotation>=90)? rotation-180:rotation;
            out += 'rotate('+rotation.toString()+')';
            return out;
         })
         .attr('text-anchor','middle')
         .attr('alignment-baseline','middle')
         .attr('font-family', 'sans-serif')
         .text(function(){
            return 'state '+i.toString();
         })
         .attr('fill','black');
         for (let j = 0; j < dataidx.length; j++) {
            if (i!==j){
            groups[i].append('path')
               .attr('d',function(){
                  var path = d3.path();
                  var angle = 6.28/10.0*i;
                  var x0 = Math.round(innerWidth/2)+radiusCircle*0.8*Math.cos(angle);
                  var y0 = Math.round(innerHeight/2)+radiusCircle*0.8*Math.sin(angle);
                  path.moveTo(x0,y0);

                  var angle1 = 6.28/10.0*j;
                  var x1 = Math.round(innerWidth/2)+radiusCircle*0.8*Math.cos(angle1);
                  var y1 = Math.round(innerHeight/2)+radiusCircle*0.8*Math.sin(angle1);
                  path.quadraticCurveTo(innerWidth/2,innerHeight/2,x1,y1);
                  return path;
               })
              .attr('stroke', 'lightgrey')
              .attr('stroke-opacity',0.2)
              .attr('stroke-width', 1)
              .attr('fill', 'none')
            }
            }


         groups[i].on('click',function(){
            d3.select(this).selectAll('circle')
            .classed('activeS', d3.select(this).selectAll('circle').classed('activeS') ? false : true);

            d3.select(this).selectAll('path')
            .classed('active', d3.select(this).selectAll('path').classed('active') ? false : true);
         });

         groups[i].on('mouseover',function(){
            d3.select(this).selectAll('circle')
            .classed('overS', true);

            d3.select(this).selectAll('path')
            .classed('over', true);
         });

         groups[i].on('mouseout',function(){
            d3.select(this).selectAll('circle')
            .classed('overS', false);

            d3.select(this).selectAll('path')
            .classed('over', false);
         });


      }
   </script>
</body>
</html>