score:3
this is, indeed, a little bit complicated, mainly because your y
property contains just one object, instead of an array of objects.
my solution here uses d3.entries
, which, according to the api:
returns an array containing the property keys and values of the specified object (an associative array). each entry is an object with a key and value attribute, such as {key: "foo", value: 42}. the order of the returned array is undefined. (emphasis mine)
it's important having an array, so we can bind the data (since the data()
method accepts only three things: an array, a function or nothing).
so, in this solution, i'm using the outer objects to append groups...
var groups = svg.selectall(null)
.data(data)
.enter()
.append("g");
... and the y
object of each outer object to append the rectangles...
var rects = groups.selectall(null)
.data(function(d) {
return d3.entries(d.y)
})
.enter()
.append("rect");
... and using d3.entries()
to convert the object into an array of objects, which can be used with data()
.
here is a demo (i changed your actual values, so we can better see the rectangles):
var data = [{
"x": 100,
"y": {
"10": 100,
"20": 200,
"26": 300,
"35": 400
}
}, {
"x": 20,
"y": {
"50": 60,
"59.6": 400,
"70.1": 20,
"80.8": 320,
"88": 20,
"98.8": 722
}
}, {
"x": 30,
"y": {
"109.8": 80,
"119.9": 600,
"139.2": 40
}
}, {
"x": 10,
"y": {
"150.1": 60,
"170.3": 400,
"190.8": 360,
"209.6": 88
}
}, {
"x": 50,
"y": {
"259.8": 20,
"280.4": 450
}
}];
var colours = d3.scaleordinal(d3.schemecategory10);
var constant = 5;
var svg = d3.select("svg");
var groups = svg.selectall(null)
.data(data)
.enter()
.append("g")
.style("fill", function(d, i) {
return colours(i)
})
var rects = groups.selectall(null)
.data(function(d) {
return d3.entries(d.y)
})
.enter()
.append("rect");
rects.attr("y", function(d) {
return +d.key
})
.attr("width", function(d) {
return d.value
})
.attr("height", constant)
.attr("x", function(d) {
return d3.select(this.parentnode).datum().x;
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="600" height="300"></svg>
pay attention to how i get the y
and width
values and, specially, the x
value (accessing the parent's datum).
Source: stackoverflow.com
Related Query
- d3 nested variable data binding
- How to improve my simple nested data binding in d3?
- D3.js > binding data in nested html structure
- Binding nested data to box plot / rectangles
- D3, nested appends, and data flow
- D3.js binding an object to data and appending for each key
- Combining Parent and Nested Data with d3.js
- Manipulate elements by binding new data
- D3.js - JSON data array is binding the same array element to everything
- d3 accessing nested data in grouped bar chart
- How do I write recursive d3.js code to deal with nested data structures?
- D3 Data Binding - When to put brackets around data
- D3 and two-way data binding
- d3.js: Access data nested 2 level down
- Convert a d3 chart to load data from json inside a variable
- Understanding D3 data binding key accessor
- How do I process data that is nested multiple levels in D3?
- Binding data not working in d3.js
- How to animate transition over grouped, nested json coordinate data with D3.js?
- d3 v4 nested data and stacked bar chart
- d3: Coloring Multiple Lines from Nested Data
- Groups and lines from nested data
- Binding data to each element using HTML textarea
- d3 multiline update path and transition path does not work with nested data
- Using nested data with D3.js
- How do you retrieve the key values of a nested data set in D3
- Conditionally appending based on nested data with D3
- Updating Nested Data
- D3 - dealing with JSON nested data structures
- Using D3 to access nested JSON data
More Query from same tag
- Creating bidirectional graphs in D3.js
- Add custom html to nodes in d3 js tree
- Use getCtm() at end of d3 translate event
- d3js: Concatenating "d.y" + year
- Stacked Area Chart in nvd3js - X Axis overflow
- D3.js v4.10 x-axis timscale and XMLHttpRequest Data
- d3js/AngularJS - use d3js in angular directives
- D3 v4 url(#gradient) not returning the fill color
- how to make d3js donut chart supports ie8?
- Open div on mouse position on click of svg text in d3
- How to center d3.js word cloud in container?
- Angular 4 : properly importing and using d3 and d3-cloud and their typings
- How to remove D3 link text from visualization
- How to avoid multiple svg elements from being created?
- how to transition a multiseries line chart to a new dataset
- d3.js marker auto orient not working
- Normalized stacked bar chart plotting issue. All rect are equally divided irrespective of data
- How to make the distance from nodes in d3.js force layout larger?
- Creating a BarChart with scala.js
- Data graph labels cut off on c3.js chart
- d3.js tree diagram - expand only next level nodes when clicking on root node
- Data not being bound to a selection in d3
- D3 V4 - Trying to Chart a Simple line Graph
- React Axios Get Call to Output JSON Format
- What is the best way to combine multiple csv files data input using d3.csv in d3.json ?
- D3 updating colors in co-occurence chart
- Display the text at the end of the arc in d3.js
- making xaxis values selectable in a d3js code
- D3 Number Format with Using HTML Unicode Expressions
- python-nvd3 lineplusbarwithfocus chart error