How to set multiple attributes with one value function?

by

UPDATE (July 8th 2016) This answer applies to d3 v3.x — NOT v4.x. For the latter version, see Tim Hayes’s answer, also on this page. Or… just swap attr with attrs in my answer below, and don’t forget to require/import/script-embed d3-selection-multi. And… don’t miss the bit about using .each, which may be useful to you.

Yeah, it’s possible by passing in a hash (like jQuery’s css() method):

d3.select('body').append('svg').selectAll('circle')
  .data(data)
.enter().append('circle')
  .attr({
    cx: function (d) { return d.x; },
    cy: function (d) { return d.y; },
    r:  function (d) { return d.r; }
  });

This works for style() as well.

If the reoccurring function (d) {} start to feel like too much, this is another approach:

d3.select('body').append('svg').selectAll('circle')
  .data(data)
  .enter().append('circle')
  .each(function (d) {
    d3.select(this).attr({
      cx: d.x,
      cy: d.y,
      r:  d.r
    });
  })

NOTE: this feature only exists in d3.js v2.10.0 or higher

More Related Contents:

  1. Selecting null: what is the reason behind selectAll(null) in D3?
  2. How to load data from a CSV file in D3 v5
  3. Cannot use attr with an object in D3 v4
  4. variable scope in d3 javascript
  5. Scaling d3 v4 map to fit SVG (or at all)
  6. Highlight selected node, its links, and its children in a D3 force directed graph
  7. Replacing d3.transform in D3 v4
  8. How do I include newlines in labels in D3 charts?
  9. Retrieve DOM target from drag callback when `this` is not available
  10. Resize svg when window is resized in d3.js
  11. Set attribute without value
  12. Invoke a callback at the end of a transition
  13. What’s the difference between a global variable and a ‘window.variable’ in JavaScript?
  14. D3.js Map with Albers Projection: How to rotate it?
  15. Generate (multilevel) flare.json data format from flat json
  16. Wrapping Text in D3
  17. D3 fill shape with image using pattern
  18. Initial Range selection in DC.js chart
  19. How to use x and width in a bar chart with scaleTime?
  20. d3 js – loading json without a http get
  21. Setting rounded corners for svg:image
  22. javascript remove “disabled” attribute from html input
  23. svg / d3.js rounded corners on one side of a rectangle
  24. Adding new nodes to Force-directed layout
  25. How do I return y coordinate of a path in d3.js?
  26. Dynamically resize the d3 tree layout based on number of childnodes
  27. How to Access styles from React?
  28. Can’t make paths draw growing slowly with D3
  29. d3 sankey charts – manually position node along x axis
  30. clicking a node in d3 from a button outside the svg

Leave a Comment