Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
Multiple Attributes Performance IV
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=587075" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36
Browser:
Chrome 132
Operating system:
Linux
Device Platform:
Desktop
Date tested:
one year ago
Test name
Executions per second
Default
4055.9 Ops/sec
each with setAttribute
4144.0 Ops/sec
setAttribute with loop
3794.5 Ops/sec
Detached
4315.8 Ops/sec
HTML Preparation code:
<script src="https://d3js.org/d3.v5.min.js"></script>
Script Preparation code:
const data = d3.range(100).map(() => ({ x: Math.random() * 300, y: Math.random() * 150 })); const svg = d3.select("body") .append("svg"); const circles = svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", d=>d.x) .attr("cy", d=>d.y) .attr("r", 2) .style("fill", "teal");
Tests:
Default
const data = d3.range(100).map(() => ({ x: Math.random() * 300, y: Math.random() * 150 })); const svg = d3.select("svg"); const circles = svg.selectAll("circle") .data(data) .attr("cx", d=>d.x) .attr("cy", d=>d.y) .attr("r", 2) .style("fill", "teal");
each with setAttribute
const data = d3.range(100).map(() => ({ x: Math.random() * 300, y: Math.random() * 150 })); const svg = d3.select("svg"); const circles = svg.selectAll("circle") .data(data) .each((d, i, n) => { n[i].setAttribute("cx", d.x); n[i].setAttribute("cy", d.y); n[i].setAttribute("r", 2); }) .style("fill", "teal")
setAttribute with loop
const data = d3.range(100).map(() => ({ cx: Math.random() * 300, cy: Math.random() * 150, r: 2 })); const svg = d3.select("svg"); const circles = svg.selectAll("circle") .data(data) .each((d, i, n) => { for(let key in d){ n[i].setAttribute(key, d[key]) } }) .style("fill", "teal")
Detached
const data = d3.range(100).map(() => ({ cx: Math.random() * 300, cy: Math.random() * 150, r: 2 })); const svg = d3.select("svg").remove(); const circles = svg.selectAll("circle") .data(data) .attr("cx", d=>d.cx) .attr("cy", d=>d.cy) .attr("r", 2) .style("fill", "teal"); d3.select("body") .append(() => svg.node())