Fix CSS cannot select number ID issue

src/diagrams/class/classRenderer.js

@@ -307,7 +307,7 @@ export const draw = function (text, id) {
   logger.info('Rendering diagram ' + text)
 
   /// / Fetch the default direction, use TD if none was found
-  const diagram = d3.select('#' + id)
+  const diagram = d3.select(`[id="${id}"]`)
   insertMarkers(diagram)
 
   // Layout graph, Create a new directed graph

src/diagrams/flowchart/flowDb.js

@@ -166,7 +166,7 @@ const setClickFun = function (id, functionName) {
   }
   if (typeof vertices[id] !== 'undefined') {
     funs.push(function (element) {
-      const elem = d3.select(element).select('#' + id)
+      const elem = d3.select(element).select(`[id="${id}"]`)
       if (elem !== null) {
         elem.on('click', function () {
           window[functionName](id)
@@ -182,7 +182,7 @@ const setLink = function (id, linkStr) {
   }
   if (typeof vertices[id] !== 'undefined') {
     funs.push(function (element) {
-      const elem = d3.select(element).select('#' + id)
+      const elem = d3.select(element).select(`[id="${id}"]`)
       if (elem !== null) {
         elem.on('click', function () {
           window.open(linkStr, 'newTab')

src/diagrams/flowchart/flowRenderer.js

@@ -391,7 +391,7 @@ export const draw = function (text, id) {
   }
 
   // Set up an SVG group so that we can translate the final graph.
-  const svg = d3.select('#' + id)
+  const svg = d3.select(`[id="${id}"]`)
 
   // Run the renderer. This is what draws the final graph.
   const element = d3.select('#' + id + ' g')

src/diagrams/gantt/ganttRenderer.js

@@ -47,7 +47,7 @@ export const draw = function (text, id) {
   elem.setAttribute('height', '100%')
   // Set viewBox
   elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h)
-  const svg = d3.select('#' + id)
+  const svg = d3.select(`[id="${id}"]`)
 
   // Set timescale
   const timeScale = d3.scaleTime()

src/diagrams/git/gitGraphRenderer.js

@@ -256,7 +256,7 @@ export const draw = function (txt, id, ver) {
       config.nodeLabel.width = '100%'
       config.nodeLabel.y = -1 * 2 * config.nodeRadius
     }
-    const svg = d3.select('#' + id)
+    const svg = d3.select(`[id="${id}"]`)
     svgCreateDefs(svg)
     branchNum = 1
     _.each(branches, function (v) {

src/diagrams/sequence/sequenceRenderer.js

@@ -315,7 +315,7 @@ export const draw = function (text, id) {
   parser.parse(text + '\n')
 
   bounds.init()
-  const diagram = d3.select('#' + id)
+  const diagram = d3.select(`[id="${id}"]`)
 
   let startx
   let stopx

src/mermaidAPI.js

@@ -412,7 +412,7 @@ const render = function (id, txt, cb, container) {
   }`
   svg.insertBefore(style2, firstChild)
 
-  d3.select('#' + id).selectAll('foreignobject > *').attr('xmlns', 'http://www.w3.org/1999/xhtml')
+  d3.select(`[id="${id}"]`).selectAll('foreignobject > *').attr('xmlns', 'http://www.w3.org/1999/xhtml')
 
   let url = ''
   if (config.arrowMarkerAbsolute) {