I'm working on a tree layout like this one: http://www.robschmuecker.com/d3-js-drag-and-drop-zoomable-tree/ that is based off mbostock's original design (http://mbostock.github.io/d3/talk/20111018/tree.html).
I'm having 3 issues with it. I'd like to be able to extend the branches both left and right of the root - in other words I'd like to be able to mirror what the sample looks like.
The second issue I'm having is that the flare.json file for this format needs to be in a very specific format - it needs to look exactly like this
{
"children": [
{
"children": [
{},
{}
]
}
]
}
While mine looks approximately like
"head": {
"title": "titleHere",
"ownerName": "nameHere
},
"body": {
"outline": [
{
"outline": [
{
"_text": "A"
},
{
"_text": "B"
},
{
"_text": "C"
},
{
"_text": "D"
},
{
"_text": "E"
}
],
"_text": "Category Header"
},
{
},
}
I basically need to write an algorithm that re-formats what I have into the correct format so I can feed it into my tree layout, if that makes sense.
The final issue I'd like to work on is to be able to edit the text by double-clicking on the tree chart.
Related
I'm sorry for the specificity of this situation, but I just can't wrap my head around the issue.
I've created the following JSON file:
{"characters":[
{"name":"battler", "sprites":
[{"img":"but_a11_aseru1.png","img":"but_a11_komaru1.png","img":"but_a21_majime1.png","img":"but_b11_majime1.png"}]
},
{"name":"eva", "sprites":
[{"img":"eva_a11_akire1.png","img":"eva_b11_majime1.png","img":"eva_b21_naku1.png","img":"eva_b22_warai1.png"}]
}
]}
And I am attempting to load it with this code, just to echo the value for "img" for the first "sprites" in each entry for now:
$.getJSON( "./char.json", function( data ) {
for (i = 0;i < data.characters.length;i++) {
alert(JSON.stringify(data.characters[i].sprites[0]));
}
});
For example: I'm trying to get it to return "but_a11_aseru1.png" for the first iteration of the loop and "eva_a11_akire1.png" for the second.
I've tried data.characters[i].sprites[0], only to get a value of {"img":"but_a11_aseru1.png"} for the first (and similar for the second). data.characters[i].sprites.img turns up as undefined. I could use .split at the ":" but I want to understand how to properly use JSON.
Can someone point out what I'm doing wrong? Thank you.
To get expected output ("but_a11_aseru1.png" for the first iteration) with your code, you need to make sprites an array with items corresponding to individual images:
{"characters":[
{"name":"battler", "sprites": [
"but_a11_aseru1.png",
"but_a11_komaru1.png",
"but_a21_majime1.png",
"but_b11_majime1.png"
]},
{"name":"eva", "sprites": [
"eva_a11_akire1.png",
"eva_b11_majime1.png",
"eva_b21_naku1.png",
"eva_b22_warai1.png"
]}
]}
and
alert(JSON.stringify(data.characters[i].sprites[0]));
or
{"characters":[
{"name":"battler", "sprites": [
{"img":"but_a11_aseru1.png"},
{"img":"but_a11_komaru1.png"},
{"img":"but_a21_majime1.png"},
{"img":"but_b11_majime1.png"}
]},
{"name":"eva", "sprites": [
{"img":"eva_a11_akire1.png"},
{"img":"eva_b11_majime1.png"},
{"img":"eva_b21_naku1.png"},
{"img":"eva_b22_warai1.png"}
]}
]}
and
alert(JSON.stringify(data.characters[i].sprites[0].img));
Your issue is that your original JSON isn't well formed. You declare "sprites" to be an array, but then all of the img keys belong to a single object. Fixed this by making sprites an array of objects instead of an array of a single badly-formed object.
{
"characters": [{
"name": "battler",
"sprites": [{
"img": "but_a11_aseru1.png",
"img": "but_a11_komaru1.png",
"img": "but_a21_majime1.png",
"img": "but_b11_majime1.png"
}]
}, {
"name": "eva",
"sprites": [{
"img": "eva_a11_akire1.png",
"img": "eva_b11_majime1.png",
"img": "eva_b21_naku1.png",
"img": "eva_b22_warai1.png"
}]
}]
}
The below code works for me. I used jQuery's $.each() function, but you could have realistically used anything you wanted to loop through the items.
var json_data = {
"characters": [{
"name": "battler",
"sprites": [{
"img": "but_a11_aseru1.png"
}, {
"img": "but_a11_komaru1.png"
}, {
"img": "but_a21_majime1.png"
}, {
"img": "but_b11_majime1.png"
}]
}, {
"name": "eva",
"sprites": [{
"img": "eva_a11_akire1.png"
}, {
"img": "eva_b11_majime1.png"
}, {
"img": "eva_b21_naku1.png"
}, {
"img": "eva_b22_warai1.png"
}]
}]
};
$.each(json_data.characters, function(i, character) {
console.log(character.name, " ", character.sprites[0].img);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You should use a different structure for the sprites, currently you have an array with one object with several keys img which are the same, Browsers will only show the last one, the rest will be omitted.
var data = {
"characters": [
{
"name":"battler",
"sprites": [
{"img":"but_a11_aseru1.png"},
{"img":"but_a11_komaru1.png"},
{"img":"but_a21_majime1.png"},
{"img":"but_b11_majime1.png"}
]
},
{
"name":"eva",
"sprites": [
{"img":"eva_a11_akire1.png"},
{"img":"eva_b11_majime1.png"},
{"img":"eva_b21_naku1.png"},
{"img":"eva_b22_warai1.png"}
]
}
]
};
$.each(data.characters, function(i, char) {
$.each(char.sprites, function(j, sprite) {
console.log(sprite.img)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hi I'm currently creating an application to gather data form a website, and as I've researched you can used Json for that, now I have created a script to gather data, at first i have no problem with it, but when I cam across with a multi tree json i started having trouble.
here is my Json
{
"orders": [
{
"line_items": [
{
"id": 7660469767,
"name": "Personalised design - purple",
"properties": [
{
"name": "personalised text 1",
"value": "2"
},
{
"name": "personalised text 2",
"value": "Nuri &"
},
{
"name": "personalised text 3",
"value": "Samira"
}
],
}
]
}
]
}
I need to get the order.line_items.properties.value.
I tried this code but it says it does not work.
$.getJSON(order.json, function (data) {
$.each(data.orders.line_items.properties, function (index, value) {
$.each(this.value, function () {
console.log(this.text);
});
});
});
Can someone help me?
$.each(data.orders[0].line_items[0].properties, function (index, value) {
console.log(value.value);
});
Both orders and line_items are array, so it should have an access to array index first before accessing other object. And you don't have to use extra each in your code. The value above is an object for each properties. You can retrieve value there.
I have a JSON object that I want to be able to visualize as a hierarchy of circles like this (you can zoom in and out of the hierarchy using mouse clicks).
I'm just trying to figure out how to use the d3.layout.pack to generate the hierarchy for the JSON object below and access the data that sits under Franchise. Any pointers would be much appreciated. Thanks.
{
"Consultant":
[
{
"ConsultantID": 1,
"ConsultantName": "Test Consultant",
"Account":
[
{
"AccountID": 1,
"AccountName": "Test Account",
"Site":
[
{
"SiteID": 1,
"SiteName": "Test Site",
"Franchise":
[
{
"FranchiseID": 1,
"FranchiseName": "Test Franchise",
"Data":
{
// Data goes here
}
}
]
}
]
}
]
}
]
}
For the layout, you can use the built in circle packing layout as you suggest.
For formating the data to use it in this layout, you can use the d3.nest() function. If you want some more insight on how nest works, then I suggest you to have a look at the following question: D3 JSON data conversion
I wrote the following JavaScript function (part of a larger "class") to help ensure anybody using the object stores attribute values in the "values" property.
function _updateAttributes(attribute, value) {
_attributes[attribute] = { values: { value: value }};
}
It works fine for a flat structure, but falls apart when I start trying to use it for sub-properties.
After running the following code:
myEntity.updateAttribute('name', 'Frankenstein');
myEntity.updateAttribute('name.source', 'John Doe');
I'd like the following structure:
{
"attributes": {
"name": {
"values": {
"value": "Frankenstein"
},
"source": {
"values": {
"value": "JohnDoe"
}
}
}
}
}
Instead, it's coming out like this:
{
"attributes": {
"name": {
"values": {
"value": "Frankenstein"
}
},
"name.source": {
"values": {
"value": "JohnDoe"
}
}
}
}
Is there any clean way to write this JavaScript or will I be faced with splitting out the strings and manually building the structure?
NOTE: I realize even the preferred structure is a little odd, but there's a Java object I'm mapping to that expects this format, so I don't have any options here.
You'll have to parse the string (parse is a bit strong, just a single split('.') with a loop).
But frankly, the cleaner way would simply be:
myEntity.name = {values: 'Frankenstein'};
myEntity.name.source = {values: 'John Doe'};
I have a JSON object that is a nested array that is of the following form:
{
"name": "Math",
"children": [
{
"name": "Trigonometry",
"children": [
{
"name": "Right Triangles and an Introduction to Trigonometry",
"children": [
{
"name": "The Pythagorean Theorem",
"children": [
{
"name": "The Pythagorean Theorem",
"size": 30
},
{
"name": "Pythagorean Triples",
"size": 52
},
{
"name": "Converse of the Pythagorean Theorem",
"size": 13
}
]
}
]
}
]
},
{
"name": "Algebra",
"children": [
{
"name": "Equations and Functions",
"children": [
{
"name": "Variable Expressions",
"children": [
{
"name": "Evaluate Algebraic Expressions",
"size": 26
}
]
}
]
}
]
}
]
}
The full array is actually much larger and can be seen here. I'm using it to build interactive graphs and charts using D3.js (or perhaps other libraries). Because it's so large, I'd like to be able to split the array by branch. In other words, to carve out particular branches of the array.
For instance, is there a way to just pull out the node "Trigonometry" and all its children? Or "Algebra" and all its children? Then "Trigonometry" or "Algebra" would become the new root or parent node.
There is no built-in way to do something like this, although the comment about a JSON query language might give you the right work-around.
Really, the problem is that you have structured your data in a way that makes it very hard to use. If instead of
{
name: "key",
children: [...]
}
you just did
{
"key": [...]
}
then you could simply do myObject["key"] to get the array you want.
For example:
var math = {
"Trigonometry": {
"Right Triangles and an Introduction to Trigonometry": {
"The Pythagorean Theorem": {
"The Pythagorean Theorem": 30,
"Pythagorean Triples": 52,
"Converse of the Pythagorean Theorem": 13
}
}
},
"Algebra": {
"Equations and Functions": {
"Variable Expressions": {
"Evaluate Algebraic Expressions": 26
}
}
}
};
var trigonometry = math["Trigonometry"];
var expressionsAndFunctions = math["Algebra"]["Expressions and Functions"];
As a bonus, that's much shorter!
Array's splice function should do it. What that will do is remove the element at a given index and return it.
If you just want a shortcut to a specific branch, couldn't you also just use
var trig = tree['trigonometry'];
to get there. This wouldn't change the original object, buy will give you a simpler way to access nodes deep inside.