Fix hovering state when target contains special characters

Author: panthony

spec/class-spec.js

@@ -17,32 +17,42 @@ describe('c3 chart class', function () {
         chart = window.initChart(chart, args, done);
     });
 
-    describe('internal.getTargetSelectorSuffix', function () {
+    describe('internal.generateTargetClass', function () {
 
         it('should not replace any characters', function () {
             var input = 'data1',
                 expected = '-' + input,
-                suffix = chart.internal.getTargetSelectorSuffix(input);
+                suffix = chart.internal.generateTargetClass(input);
             expect(suffix).toBe(expected);
         });
 
         it('should replace space to "-"', function () {
             var input = 'data1 suffix',
                 expected = '-data1-suffix',
-                suffix = chart.internal.getTargetSelectorSuffix(input);
+                suffix = chart.internal.generateTargetClass(input);
             expect(suffix).toBe(expected);
         });
 
         it('should replace space to "-" with multibyte characters', function () {
             var input = 'data1 suffix 日本語',
                 expected = '-data1-suffix-日本語',
-                suffix = chart.internal.getTargetSelectorSuffix(input);
+                suffix = chart.internal.generateTargetClass(input);
             expect(suffix).toBe(expected);
         });
 
-        it('should replace special charactors to "-"', function () {
+        it('should not replace special characters', function () {
+            var input = 'data1 !@#$%^&*()_=+,.<>"\':;[]/|?~`{}\\',
+                expected = '-data1-!@#$%^&*()_=+,.<>"\':;[]/|?~`{}\\',
+                suffix = chart.internal.generateTargetClass(input);
+            expect(suffix).toBe(expected);
+        });
+    });
+
+    describe('internal.getTargetSelectorSuffix', function () {
+
+        it('should escape special characters', function () {
             var input = 'data1 !@#$%^&*()_=+,.<>"\':;[]/|?~`{}\\',
-                expected = '-data1--------------------------------',
+                expected = '-data1-\\!\\@\\#\\$\\%\\^\\&\\*\\(\\)\\_\\=\\+\\,\\.\\<\\>\\"\\\'\\:\\;\\[\\]\\/\\|\\?\\~\\`\\{\\}\\\\',
                 suffix = chart.internal.getTargetSelectorSuffix(input);
             expect(suffix).toBe(expected);
         });

src/class-utils.js

@@ -1,8 +1,12 @@
 import CLASS from './class';
 import { c3_chart_internal_fn } from './core';
 
+
+c3_chart_internal_fn.generateTargetClass = function (targetId) {
+    return targetId || targetId === 0 ? ('-' + targetId).replace(/\s/g, '-') : '';
+};
 c3_chart_internal_fn.generateClass = function (prefix, targetId) {
-    return " " + prefix + " " + prefix + this.getTargetSelectorSuffix(targetId);
+    return " " + prefix + " " + prefix + this.generateTargetClass(targetId);
 };
 c3_chart_internal_fn.classText = function (d) {
     return this.generateClass(CLASS.text, d.index);
@@ -82,7 +86,8 @@ c3_chart_internal_fn.classChartArc = function (d) {
     return CLASS.chartArc + this.classTarget(d.data.id);
 };
 c3_chart_internal_fn.getTargetSelectorSuffix = function (targetId) {
-    return targetId || targetId === 0 ? ('-' + targetId).replace(/[\s?!@#$%^&*()_=+,.<>'":;\[\]\/|~`{}\\]/g, '-') : '';
+    return this.generateTargetClass(targetId)
+        .replace(/([?!@#$%^&*()_=+,.<>'":;\[\]\/|~`{}\\])/g, '\\$1');
 };
 c3_chart_internal_fn.selectorTarget = function (id, prefix) {
     return (prefix || '') + '.' + CLASS.target + this.getTargetSelectorSuffix(id);