Cannot use attr with an object in D3 v4

by

From D3 v4 onwards you cannot use objects to set attr or style anymore. To do so, you have to reference the mini library D3-selection-multi:

<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

After doing that, change your code from attr to attrs (yes, like a plural):

var textLabels = labelGroups.append("text").attrs({
    //mind the 's' here-------------------------ˆ
});

Do the same for the styles: it should be styles, as a plural, not style.

If you don’t want to change all this, simply do as the “regular” way: set x, y, text-anchor and class in separate attr.

Here is the selection-multi documentation: https://github.com/d3/d3-selection-multi/blob/master/README.md#selection_attrs

More Related Contents:

  1. Unable to get node datum on mouseover in D3 v6
  2. What’s the best way to make a d3.js visualisation layout responsive?
  3. How to add a tooltip to an svg graphic?
  4. dc.js – how to create a row chart from multiple columns
  5. Fix Node Position in D3 Force Directed Layout
  6. D3 force layout – linking nodes by name instead of index
  7. D3 Differentiate between click and drag for an element which has a drag behavior
  8. Label outside arc (Pie chart) d3.js
  9. Where is d3.svg.diagonal()?
  10. How to draw a path smoothly from start point to end point in D3.js
  11. How are input parameters filled in javascript method chains?
  12. (Embed and) Refer to an external SVG via D3 and/or javascript
  13. Load multiple files using the d3-fetch module
  14. d3.js – v3 and v4 – Enter and Update differences
  15. How to convert to D3’s JSON format?
  16. How to set multiple attributes with one value function?
  17. Plotting points on a map with D3
  18. Importing data from multiple csv files in D3
  19. D3.js – Donut charts with multiple rings
  20. d3 force directed layout – link distance priority
  21. Convert a directory structure in the filesystem to JSON with Node.js
  22. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  23. SVG to Canvas with d3.js
  24. Display an arrow head in the middle of D3 force layout link
  25. How to register multiple external listeners to the same selection in d3?
  26. D3.js Set initial zoom level
  27. D3 put arc labels in a Pie Chart if there is enough space
  28. d3.js histogram with positive and negative values
  29. D3.js: Position tooltips using element position, not mouse position?
  30. read csv/tsv with no header line in D3

Leave a Comment