4.0 attr not support object as parameter

[EcutDavid]

In 3.X, we can use syntax like:

  .attr({
    cx: d => d.x,
    cy: d => d.y,
    r: d => colorScale(d.value),
    fill: '#D0021B',
    opacity: 0.5,
  })

But now, it's not work and no error prompt.
Need change it to

.attr('cx', d=> d.x)
.......

What's the reason the syntax changed?

Thanks in advance.

[mbostock]

In D3 4.0, multi-value map support has moved to the d3-selection-multi repository as an optional plugin, using distinct names (e.g., selection.attrs instead of selection.attr) to avoid ambiguity.

[skipjack]

What's the proper way to require this plugin (or any plugin) if we're not exposing d3 globally?

I upgraded to v4 (d3@4.0.0-rc.2) and npm installed d3-selection-multi however I'm totally lost as to how I'm supposed to require or import the plugin in a module.

import * as d3 from 'd3'

works fine for the base functionality, but I use the attr({...}) syntax frequently and I haven't been able to get it to work again. I would expect something like this:

import * as d3 from 'd3'
import 'd3-selection-multi'

// ...

d3.select(...).attrs({...})

however this fails. I know I'm probably missing something silly here but from reading the docs and using other libs like leaflet, this was my best guess as to how I could get it working (although leaflet does expose itself globally). Using leaflet plugins through npm and import or require:

import L from 'leaflet'
import 'leaflet.heat'
import 'leaflet.markercluster'

My only other guess would be that maybe I need to use rollup and make a custom build?

[mbostock]

It might depend on how your bundler is configured. If your bundler isn’t observing the jsnext:main defined in the d3 package.json, then it’s possible that you are importing the generated UMD bundle (see build/d3.js). If that’s the case, then the imported d3 is a copy of all the default D3 modules, rather than a reference, and so when you import d3-selection-multi, you end up with two copies of d3-selection, and the one that was imported and modified by d3-selection-multi isn’t exposed on the d3 symbol.

One way to avoid this problem is to use the modules directly and avoid the default bundle:

import * as d3_selection from "d3-selection";
import "d3-selection-multi"; // modifies d3_selection.selection.prototype

If you’re using require in Node, you can also use the default bundle without pulling in duplicate code:

var d3 = require("d3");
require("d3-selection-multi"); // modifies d3.selection.prototype

That’s because there’s a special d3.node.js bundle that uses require for the dependencies rather than inlining the code. This approach is not feasible for the UMD bundle, since inlining the code is a requirement for vanilla script tags.

As you guessed, another solution is to create your own custom bundle and then require that as d3 rather than loading them separately. You could use Rollup for that, but other tools could be made to work too.

[skipjack]

Thanks for the quick response! I'll keep playing around with it (I'm using Webpack btw)...

[ValentinH]

I'm migrating several components to v4 and I just got hit by this breaking change. Too bad that it's not listed in https://github.com/d3/d3/blob/master/CHANGES.md

[curran]

@ValentinH It is listed there, in the last paragraph of the Selections section, quoted here:

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. The multi-value map methods have also been renamed to plural form to reduce overload: selection.attrs, selection.styles and selection.properties.

[ValentinH]

OK, sorry for that. I didn't read until the end of the section and was searching for the attr( string in the documentation.

Just to understand, is extracting those multi-value methods in a separate repository showing that the "recommended" way is to chain single methods?

[mbostock]

Yes, d3-selection-multi is available but not recommended by default.

[saun4app]

@mbostock, would you please help us understand why d3-selection-multi is not recommended. Thank you.