syntax: svg.append('line').attr({ x1: 0, x2: 2 * width / 4 })

In I see constructs like:

  .attr({ x1: 0, x2: 2 * width / 4 })
  .style({ stroke: 'green' })

I find it rather elegant, yet, when I use this in a notebook, it fails. I’m probably missing some (basic?) knowledge. Please enlighten me.

The linked notebook uses D3 v3, but the ability to pass objects to .attr() and .style() got dropped in D3 v4 and moved to d3-selection-multi.

You can use the following snippet to add d3-selection-multi:

d3 = {
  const d3 = await require('d3@5');
  await require.alias({'d3-selection': d3})('d3-selection-multi');
  return d3;

This will add the methods .attrs(), .styles() and .properties() to D3 selections.


Aha, thanks.

Do yo know why it was dropped?

From D3’s

For the sake of parsimony, the multi-value methods—where you pass an object to set multiple attributes, styles or properties simultaneously—have been extracted to d3-selection-multi and are no longer part of the default bundle.



Thanks Fabian!