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

Community Help
1

In http://bl.ocks.org/eweitnauer/7324712 I see constructs like:

svg.append('line')
  .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.

2

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.

2 Likes
3

Aha, thanks.

Do yo know why it was dropped?

4

From D3’s CHANGES.md:

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.

¯\_(ツ)_/¯

2 Likes
5

Thanks Fabian!