D3 – how to deal with JSON data structures?

by

When you join data to a selection via selection.data, the number of elements in your data array should match the number of elements in the selection. Your data array has two elements (for Jim and Ray), but the selection you are binding it to only has one SVG element. Are you trying to create multiple SVG elements, or put the score rects for both Jim and Ray in the same SVG element?

If you want to bind both data elements to the singular SVG element, you can wrap the data in another array:

var chart = d3.select("#charts").append("svg")
    .data([data])
    .attr("class", "chart")
    …

Alternatively, use selection.datum, which binds data directly without computing a join:

var chart = d3.select("#charts").append("svg")
    .datum(data)
    .attr("class", "chart")
    …

If you want to create multiple SVG elements for each person, then you’ll need a data-join:

var chart = d3.select("#charts").selectAll("svg")
    .data(data)
  .enter().append("svg")
    .attr("class", "chart")
    …

A second problem is that you shouldn’t use d3.values with an array; that function is for extracting the values of an object. Assuming you wanted one SVG element per person (so, two in this example), then the data for the rect is simply that person’s associated scores:

var rect = chart.selectAll("rect")
    .data(function(d) { return d.scores; })
  .enter().append("rect")
    …

If you haven’t already, I recommend reading these tutorials:

More Related Contents:

  1. variable scope in d3 javascript
  2. Scaling d3 v4 map to fit SVG (or at all)
  3. How to add a tooltip to an svg graphic?
  4. Replacing d3.transform in D3 v4
  5. How do I include newlines in labels in D3 charts?
  6. Updating SVG Element Z-Index With D3
  7. D3 Appending Text to a SVG Rectangle
  8. D3 force layout – linking nodes by name instead of index
  9. Generate (multilevel) flare.json data format from flat json
  10. In d3, how to get the interpolated line data from a SVG line?
  11. Creating and appending detached elements with d3.create
  12. Label outside arc (Pie chart) d3.js
  13. D3js take data from an array instead of a file
  14. Where is d3.svg.diagonal()?
  15. How to draw a path smoothly from start point to end point in D3.js
  16. How to convert to D3’s JSON format?
  17. Plotting points on a map with D3
  18. D3 fill shape with image using pattern
  19. d3 js – loading json without a http get
  20. Setting rounded corners for svg:image
  21. Circles in Map Displayed Incorrect Location in D3 V4
  22. How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?
  23. svg / d3.js rounded corners on one side of a rectangle
  24. SVG to Canvas with d3.js
  25. How do I return y coordinate of a path in d3.js?
  26. Display an arrow head in the middle of D3 force layout link
  27. Passing data from Django to D3
  28. Can’t make paths draw growing slowly with D3
  29. draw text in d3 arc javascript
  30. D3 put arc labels in a Pie Chart if there is enough space

Leave a Comment