Benchmark: Multiple Attributes

HTML Preparation code:

<script src="https://d3js.org/d3.v5.min.js"></script>

Tests:

Default
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(null) .data(data) .enter() .append("circle") .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("body") .append("svg"); const circles = svg.selectAll(null) .data(data) .enter() .append("circle") .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("body") .append("svg"); const circles = svg.selectAll(null) .data(data) .enter() .append("circle") .each((d, i, n) => { for(let key in d){ n[i].setAttribute(key, d[key]) } }) .style("fill", "teal")

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36

Browser/OS: Chrome 79 on Windows 8.1

Multiple Attributes (version: 1)