EDIT: This was a simple fix, I'd bound my link simulation up in a timer function, which meant I was trying to create an array before the links "existed" moving the graph.link.forEach function into the timer function has sorted it right out. Thanks to Gerardo for making me think properly about the problem!
So I'm working on a force chart and trying to use a modified version of the fade function and I've been trying to implement the fade function found here (and in many other examples).
The trouble is:
var linkedByIndex = {};
graph.links.forEach(function (d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
returns an empty array.
If I remove the .index, I get an array of source/target id's used to link the nodes.
Unfortunately, it seems to work fine with inline data in jsfiddle, but not when the data is from a get request. Also the source/target indexes show up in the links array in the console, so I'm not sure why the array's empty.
Any ideas?
Edit: An older version is here, linkedByIndex works in jsFiddle, but doesn't seem to after a PHP request.
The data structure is:
graph = "locations",
[
{"name": "a", "id": 1},
{"name": "b", "id": 2}
],
"nodes",
[
{"name": "A", "n_id": 1 "location": 1},
{"name": "B","n_id": 2, "location": 2}
],
"links",
[
{"source": "1", "target": "2"}
etc.
];
Related
I'm thinking about moving our API from a standard HTTP endpoint to GraphQL.
On the client we have data tables in which the user can choose what columns they want to have visible.
Users can save their column layout for the next time they open the application.
The problem is the first time such a table is shown, the client requires two things:
What columns has the user saved
The data of these columns for each record
Currently we have a single endpoint returning both of these in JSON.
URL: /contacts/table
{
"columns": ["a", "b", "c"],
"rows": [
{
"a": 0,
"b": 1,
"c": 2
}
]
}
Is there a nice way to get the above working in a GraphQL API?
Some things I've tried:
Have an API that returns key value pairs
"columns": ["a", "b", "c"]
"rows": [
[
{
"key": "a"
"value": 0
},
{
"key": "b"
"value": 1
}
]
]
Problems with this approach:
It has a lot of overhead
It feels like reinventing the wheel seeing as JSON is already key/value based.
Doesn't work well with caching frameworks such as apollo when the same type needs to be accessed in a non-table way
Custom syntax
query {
tables {
contacts {
columns #provideFragment("ContactColumns")
}
}
contacts {
..ContactsColumns
}
}
Problems with this approach:
It's not standard (as far as I know), so it might not work with other tooling.
I am formatting regular json data to a flare format for a chart I am working on and ran into an issue creating the children. I have a fiddle of my current work and was hoping someone could spot what I missed.
not working
I only get it to return this [no children]:
[
{
"parent": "new skill",
"name": "Advanced",
"AgtName": "amy"
},
{
"parent": "new skill",
"name": "Advanced",
"AgtName": "GARY"
}
]
Since you are using d3, you can use d3.nest to get a hierarchical structure from an array. Here is a snippet based on your code:
let tree = d3.nest().key(node => node.name).entries(data);
Working demo
I'm trying to read individual value from be json array object to display in the page. I have tried with below code but couldn't make it. Please advise what am i doing wrong here.
Apperciate your help.
You can get the length of a JavaScript array via its property length. To access the array Reference in your object, you can use dot notation.
In combination, the following should do what you expect:
var obj = {
"Reference": [
{
"name": "xxxxxxxx",
"typeReference": {
"articulation": 0,
"locked": false,
"createdBy": {
"userName": "System",
},
"lastModifiedBy": {
"userName": "System",
},
"lastModified": 1391084398660,
"createdOn": 1391084398647,
"isSystem": true
},
...
},
...
]
};
console.log(obj.Reference.length);
In case you are actually dealing with a JSON string, not a JavaScript object, you will need to parse it first via JSON.parse().
You get the length of an array by simply access the length attribute.
For example [0,1,2,3].length === 4.
If you just want to loop through the array, use forEach or map instead of a for loop. It's safer, cleaner, less hassle and you don't meed to know the length.
E.g.
[0,1,2,3].forEach(num => console.log(num))
Using D3 v3, I formatted my data to match Mike's example to quick start my dev process. Example page here https://github.com/d3/d3-3.x-api-reference/blob/master/Stack-Layout.md
var data = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49}
]
}
];
Then all i had to do to obtain the stacked values was
var stack = d3.layout.stack().values(d=>d.values)
var layers = stack(data)
Exactly how he did it in his example.
However, in v4 it seems like the stack function expects tabular formatted data, so the above data would look like this.
var data = [
{x: 0, apples: 91, oranges: 9},
{x: 1, apples: 290, oranges: 49},
];
Is there an easy way to keep my data format and use the v4 stack function? I can't seem to grok the new way to do this. In my current data format, i have useful properties associated with the values array. If i change my data format to tabular, I don't see a convenient way to pair properties with values.
I've been having the same problem. Unfortunately, the new way doesn't seem to match the way APIs serialize model instances (sort of like your original data); instead you're stuck with JSONified tabular data format. I feel like this works when you're working with csv dumps, but that's not generally how databases are organised.
I've posted a related answer here that transforms object-grouped format (eg by fruit in your example) into data-point format (by x-coordinate in your example) as expected by d3.stack(). You'll be able to adapt the code to your particular case.
Working with JSON data, I am able to set a domain X and Y to the minimum and maximum value of their respective data attributes, using
.y(d3.scale.linear().domain([0, d3.max(data, function(d) { return d.peopleVisited + 100; })]))
Here is an exemplary jsFiddle : http://jsfiddle.net/5H3Ay/15/
Can someone please suggest how to achieve this with csv data, using d3.csv()?
There should not be any difference in setting the domain, as long as you format your (CSV-) data properly.
The D3 Wiki page for CSV says that, using d3.csv.parse(string[, accessor]):
[For] the following CSV file:
Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38
The resulting JavaScript array is:
[
{"Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34"},
{"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"}
]
... which is a valid JSON array.
If you add peopleVisited as a header field in your CSV-file, your code should work already.
Just set up your data variable with csv.parse().
Edit
You can load your CSV, for example, by calling d3.csv() with an accessor function like this:
var data = d3.map();
d3.csv("../path/to/your/file.csv", /* accessor */ function(d) {
data.set(d.id, d.peopleVisited);
});
... which uses the column id as the key.