Multi-Value Maps

D3 2.10.0 adds support for multi-value maps. Where previously you might have written:

svg.attr("width", width).attr("height", height);

You can now write:

svg.attr({width: width, height: height});

The new syntax (familiar to jQuery users) is slightly more concise. Like other methods in D3, the values in the maps can be specified as constants or functions of data. Multi-value maps also provide a convenient, declarative way to share code. For example, if you have the following map:

var dotAttrs = {
  cx: function() { return Math.random() * width; },
  cy: function() { return Math.random() * height; },
  r: function() { return 100 + Math.random() * 100; }
};

You can later reference this map like so:

circle.attr(dotAttrs);

This technique is similar to creating reusable functions with selection.call.

Multi-value maps are supported on the following methods: selection.attr, selection.style, selection.classed, selection.property, selection.on, transition.attr and transition.style.