update...

panzh
1 parent 72478660
Showing 1 changed file with 20 additions and 6 deletions
src/main/resources/static/pages/m/m.html
@@ -136,7 +136,6 @@
         svg g.gps-wrap > rect {
             width: 64px;
             height: 15px;
-            rx: 2px;
             cursor: pointer;
             stroke: #c94f21;
             fill: #c94f21;
@@ -189,6 +188,13 @@
             display: block;
             margin-bottom: 2px;
         }
+
+        rect.station_text_rect{
+            width: 250px;
+            height: 30px;
+            transform: translate(-9px, -11px);
+            fill: #fff0;
+        }
     </style>
 </head>
  
@@ -340,10 +346,10 @@
  
         if (_call_info.auto) {
             _call_info.auto = null;
-            var $text = $('text.station_text[_id=' + _call_info.id + ']').trigger('click');
+            var $rect = $('rect.station_text_rect[_id=' + _call_info.id + ']').trigger('click');
  
             $('.station_chart_wrap').animate({
-                scrollTop: $text.attr('y') - 25
+                scrollTop: $rect.attr('y') - 25
             });
         }
     }
@@ -381,6 +387,14 @@
                 return d.stationCode;
             });
  
+        //text覆盖一个rect 方便点击
+        items.append('rect').classed({'station_text_rect': true})
+            .attr('x', cx)
+            .attr('y', cy)
+            .attr('_id', function (d) {
+                return d.stationCode;
+            });
+
         //path
         items.append('path').classed({'station_link': true})
             .attr('d', function (d, i) {
@@ -410,7 +424,7 @@
         items.append('path').classed({'cut_link': true})
             .attr('d', function (d, i) {
                 var y = yScale(i) + 26;
-                return i == len - 1 ? 'M15,' + y + 'L' + w + ',' + y : 'M85,' + y + 'L' + w + ',' + y;
+                return i == len - 1 ? 'M15,' + y + 'L' + w + ',' + y : 'M100,' + y + 'L' + w + ',' + y;
             });
  
         svg.append('g').classed({
@@ -458,9 +472,9 @@
         }, null, {enableHighAccuracy: true});
     };
  
-    $(document).on('click', 'svg text.station_text', function () {
+    $(document).on('click', 'svg rect.station_text_rect', function () {
         $('text.station_text.active').attr('class', 'station_text');
-        $(this).attr('class', 'station_text active');
+        $(this).prev().attr('class', 'station_text active');
  
         var _id = $(this).attr('_id');
         var ci;