accessing SVG elements by name

[bijwaard]

I'm trying to get my phasor plot working with React that used to work with the Angular SVG plugn, importing the SVG worked fine.

I have the following id's for labels in my SVG (and similar for other repeating elements like circles):

• label0
• label20
• label40
• label60
• label80
• label100

With the older SVG plugin I could fetch them in a loop like this in onInit():

var labels=[];
for (i = 1; i < 6; i++) {
    labels.push(svgnode.getElementById("label"+(i*20)));
}

However svgnode.getElementsById does no longer seem to work in this plugin, is there another way to fetch the svg elements by ID?

I tried to map them with the plugin I get something like this:

Another issue is that I cannot map all SVG elements, because some of them are in the background of others.

Kind regards, Dennis

[bijwaard]

Got further by manually creating other maps, and creating arrays of SVG nodes in the initialisation as follows:

options.labels=[svgmap.label0,svgmap.label20,svgmap.label40,svgmap.label60,svgmap.label80,svgmap.label100];
console.log("#labels="+options.labels.length)
options.line=[svgmap.L1,svgmap.L2,svgmap.L3,svgmap.L4];
console.log("#line="+options.line.length)

However, when I try to update a line via JS Render, it gives the following exception:

console.log("#line="+options.line.length);
options.line[3].attr({"x2" : 100,"y2" : 100});

#line=4

User event code failed: TypeError: options.line[3] is undefined
    anonymous 484.805ce326eee3d290c3d9.js line 1099 > eval line 1 > Function:12
    renderSVG ACESVGjsPanel.tsx:240
    ref ACESVGjsPanel.tsx:269
    React 14
    triggerForceUpdate PanelEditor.tsx:121
    RxJS 3
    d EventBus.ts:38
    emit index.js:181
    publish EventBus.ts:28
    updateOptions PanelModel.ts:301
    onPanelOptionsChanged PanelEditor.tsx:172
    onChange getVisualizationOptions.tsx:94
    onChange getVisualizationOptions.tsx:340
    onBlur CodeEditor.tsx:78
    React 11
ACESVGjsPanel.tsx:249:16
    renderSVG ACESVGjsPanel.tsx:249
    ref ACESVGjsPanel.tsx:269
    React 14
    triggerForceUpdate PanelEditor.tsx:121
    RxJS 3
    d EventBus.ts:38
    emit index.js:181
    publish EventBus.ts:28
    updateOptions PanelModel.ts:301
    onPanelOptionsChanged PanelEditor.tsx:172
    onChange getVisualizationOptions.tsx:94
    onChange getVisualizationOptions.tsx:340
    onBlur CodeEditor.tsx:78
    React 11

Kind regards, Dennis