score:1
Accepted answer
Please note that data
is an array of objects and not an object. So to get the keys of an object, you should apply d3.keys
function on one of the objects in the array. Like this -
tabulate(data, d3.keys(data[0])); //data[0] is an object, applying d3.keys(data[0]) will return [Label, Count]
var data = [{
"Label": "External-Partner-Induced",
"Count": 9
},
{
"Label": "Null",
"Count": 1
},
{
"Label": "FCTS-Induced",
"Count": 66
},
{
"Label": "EI-Partner-Induced",
"Count": 78
}
];
function tabulate(data, columns) {
var table = d3.select('body').append('table')
var thead = table.append('thead')
var tbody = table.append('tbody');
// append the header row
thead.append('tr')
.selectAll('th')
.data(columns).enter()
.append('th')
.text(function(column) {
return column;
});
// create a row for each object in the data
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr');
// create a cell in each row for each column
var cells = rows.selectAll('td')
.data(function(row) {
return columns.map(function(column) {
return {
column: column,
value: row[column]
};
});
})
.enter()
.append('td')
.text(function(d) {
return d.value;
});
return table;
}
// render the table
tabulate(data, d3.keys(data[0]));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Source: stackoverflow.com
Related Query
- D3 how to properly get the key value INSIDE of a json object
- How to get the specific JSON array from a value in that array
- D3.js-How can I get the maximum value of a specified key in an object
- How should I use map to get back some values of an object when the key are user input
- How do I assign ticks to be equal to a different key value from the same object from the one on which the axis is based on in D3.js?
- How to get the total number of rows with particular value in json file in d3.js
- How to get the minimum and maximum value from a Json
- How to get absolute coordinates of object inside a <g> group?
- How to get the total depth of an unknown JSON hierarchy?
- How get the returned value of d3.ease?
- How to get value from the element using selection in d3
- How can I get access to the current selection inside a D3 callback?
- Passing JSON from Grails Controller to d3 - how to get the .gsp side working?
- How to get a value from a stylesheet into the code so that it can be used programmatically?
- How to sort object by key through JSON file parsing in D3.js
- How to get the X value of a ticks from the x axis?
- How to get the minimum and maximum value between a given range in data set in d3.js
- How can I get the value at the corresponding place while mouseover in d3.js?
- D3 js get a d3.max from an object that contains a specific key value
- How to select value in object with key in d3
- Get the minimum value of an object in d3.min
- How to access object properties in a JSON file using literals obtained from the same file
- How to get the JSON path from element
- how many different key pair values in a json object using d3 or jquery
- Object property is null, but the value entered is not. How do i insert the value properly?
- How can i get the key of an element in stack-layout in d3?
- How to get JSON key for d3.js chart
- How do I structure data in php to get the correct json result?
- How to get a dashed line on Y axis and how to display the value beside the graph in d3
- How to get key of array or property value
More Query from same tag
- forceManyBody filtered in d3
- D3 Horizontal grouped stacked chart bars overlap for a small number of values
- D3 Scatter Plot Not Implementing Zoom Interaction Properly
- How to assign the x-axis position of a node in a Sankey Diagram (D3) from the json file
- D3.js grouped bar chart legend missing data
- D3 v4: Reset zoom state
- Error when drawing a d3.js line with no data
- Create simple scatter plot with Dimple
- d3.js: zoom and drag failure
- d3.js: How to add a data key?
- How can I keep tick marks from repeating when I have a small number of dates on an nvd3 chart
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- Find nearest keyframe using scales
- darken rect/circle on mouseover in d3
- D3 - tick values aren't spaced evenly with domain and range
- D3.js How to update chart display with new data?
- Losing bar when changing y-axis direction in d3.js
- Put markers to a map generated with topoJSON and d3.js
- Access parent attribute in d3.js to set attribute of child
- Combining angularJS and d3.js: Refreshing a plot after submitting new input parameters
- D3: Draw part of interpolated path with dashed stroke
- Generated color of voronoi polygon in D3.js
- Adjust time scale in d3js
- Drawing line between two projected points on map - no line showing - D3.js
- How to have tooltip follow cursor when hovering on bar
- Refresh D3 generated table every 5 seconds
- n3-chart width not set according to parent width
- d3 dynamic url based on array values
- path and x and y axis not being appended to g tag in d3.js
- clicking a node in d3 from a button outside the svg