Escape special characters for class suffix - #665

c3.js

@@ -5490,7 +5490,7 @@
         return CLASS.chartArc + this.classTarget(d.data.id);
     };
     c3_chart_internal_fn.getTargetSelectorSuffix = function (targetId) {
-        return targetId || targetId === 0 ? ('-' + targetId).replace(/\s/g, '-') : '';
+        return targetId || targetId === 0 ? ('-' + targetId).replace(/[\s!@#$%^&*()_+,<>]/g, '-') : '';
     };
     c3_chart_internal_fn.selectorTarget = function (id, prefix) {
         return (prefix || '') + '.' + CLASS.target + this.getTargetSelectorSuffix(id);

spec/class-spec.js

@@ -46,6 +46,13 @@ describe('c3 chart class', function () {
             expect(suffix).toBe(expected);
         });
 
+        it('should replace special charactors to "-"', function () {
+            var input = 'data1 !@#$%^&*()_+,<>',
+                expected = '-data1----------------',
+                suffix = chart.internal.getTargetSelectorSuffix(input);
+            expect(suffix).toBe(expected);
+        });
+
     });
 
     describe('multibyte characters on chart', function () {

src/class.js

@@ -155,7 +155,7 @@ 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 targetId || targetId === 0 ? ('-' + targetId).replace(/[\s!@#$%^&*()_+,<>]/g, '-') : '';
 };
 c3_chart_internal_fn.selectorTarget = function (id, prefix) {
     return (prefix || '') + '.' + CLASS.target + this.getTargetSelectorSuffix(id);