{"ScriptPreparationCode":null,"TestCases":[{"Name":"Default","Code":"const data = d3.range(100).map(() =\u003E ({\r\n x: Math.random() * 300,\r\n y: Math.random() * 150\r\n}));\r\n\r\nconst svg = d3.select(\u0022body\u0022)\r\n\t.append(\u0022svg\u0022);\r\n \r\nconst circles = svg.selectAll(null)\r\n\t.data(data)\r\n .enter()\r\n .append(\u0022circle\u0022)\r\n .attr(\u0022cx\u0022, d=\u003Ed.x)\r\n .attr(\u0022cy\u0022, d=\u003Ed.y)\r\n .attr(\u0022r\u0022, 2)\r\n .style(\u0022fill\u0022, \u0022teal\u0022);","IsDeferred":false},{"Name":"each with setAttribute","Code":"const data = d3.range(100).map(() =\u003E ({\r\n x: Math.random() * 300,\r\n y: Math.random() * 150\r\n}));\r\n\r\nconst svg = d3.select(\u0022body\u0022)\r\n .append(\u0022svg\u0022);\r\n\r\nconst circles = svg.selectAll(null)\r\n .data(data)\r\n .enter()\r\n .append(\u0022circle\u0022)\r\n .each((d, i, n) =\u003E {\r\n n[i].setAttribute(\u0022cx\u0022, d.x);\r\n n[i].setAttribute(\u0022cy\u0022, d.y);\r\n n[i].setAttribute(\u0022r\u0022, 2);\r\n })\r\n .style(\u0022fill\u0022, \u0022teal\u0022)\r\n","IsDeferred":false},{"Name":"setAttribute with loop","Code":"const data = d3.range(100).map(() =\u003E ({\r\n cx: Math.random() * 300,\r\n cy: Math.random() * 150,\r\n r: 2\r\n}));\r\n\r\nconst svg = d3.select(\u0022body\u0022)\r\n .append(\u0022svg\u0022);\r\n\r\nconst circles = svg.selectAll(null)\r\n .data(data)\r\n .enter()\r\n .append(\u0022circle\u0022)\r\n .each((d, i, n) =\u003E {\r\n for(let key in d){\r\n \tn[i].setAttribute(key, d[key])\r\n }\r\n })\r\n .style(\u0022fill\u0022, \u0022teal\u0022)\r\n\r\n","IsDeferred":false},{"Name":"Clone","Code":"const data = d3.range(100).map(() =\u003E ({\r\n cx: Math.random() * 300,\r\n cy: Math.random() * 150,\r\n r: 2\r\n}));\r\n\r\nconst svg = d3.select(\u0022body\u0022)\r\n .append(\u0022svg\u0022);\r\n\r\nconst detachedCircle = d3.create(\u0027svg:circle\u0027);\r\nconst circles = svg.selectAll(null)\r\n\t.data(data)\r\n .enter()\r\n .append(d =\u003E detachedCircle.clone()\r\n .attr(\u0022cx\u0022, d.x)\r\n .attr(\u0022cy\u0022, d.y)\r\n .attr(\u0022r\u0022, 2)\r\n .style(\u0022fill\u0022, \u0022teal\u0022)\r\n .node());","IsDeferred":false}]}