I built this bar chart in D3, It can be viewed here(http://jsfiddle.net/YQthy/). I want to replace the random data with data from this json database.
我在D3中构建了这个条形图，可以在这里查看(http://jsfiddle.net/YQthy/)。我想用这个json数据库中的数据替换随机数据。
{
"description" : "Cheese, caraway",
"group" : "Dairy and Egg Products",
"id" : 1008,
"manufacturer" : "",
"nutrients" : [
{
"description" : "Protein",
"group" : "Composition",
"units" : "g",
"value" : 25.18
},
{
"description" : "Total lipid (fat)",
"group" : "Composition",
"units" : "g",
"value" : 29.2
},
{
"description" : "Carbohydrate, by difference",
"group" : "Composition",
"units" : "g",
"value" : 3.060
},
{
"description" : "Energy",
"group" : "Energy",
"units" : "kcal",
"value" : 376.0
},
{
"description" : "Water",
"group" : "Composition",
"units" : "g",
"value" : 39.28
},
{
"description" : "Fiber, total dietary",
"group" : "Composition",
"units" : "g",
"value" : 0.0
},
{
"description" : "Calcium, Ca",
"group" : "Elements",
"units" : "mg",
"value" : 673.0
},
{
"description" : "Iron, Fe",
"group" : "Elements",
"units" : "mg",
"value" : 0.64
},
{
"description" : "Magnesium, Mg",
"group" : "Elements",
"units" : "mg",
"value" : 22.0
},
{
"description" : "Phosphorus, P",
"group" : "Elements",
"units" : "mg",
"value" : 490.0
},
{
"description" : "Potassium, K",
"group" : "Elements",
"units" : "mg",
"value" : 93.0
},
{
"description" : "Sodium, Na",
"group" : "Elements",
"units" : "mg",
"value" : 690.0
},
{
"description" : "Zinc, Zn",
"group" : "Elements",
"units" : "mg",
"value" : 2.94
},
{
"description" : "Copper, Cu",
"group" : "Elements",
"units" : "mg",
"value" : 0.0240
},
{
"description" : "Manganese, Mn",
"group" : "Elements",
"units" : "mg",
"value" : 0.0210
},
{
"description" : "Selenium, Se",
"group" : "Elements",
"units" : "mcg",
"value" : 14.5
},
{
"description" : "Vitamin A, IU",
"group" : "Vitamins",
"units" : "IU",
"value" : 1054.0
},
{
"description" : "Retinol",
"group" : "Vitamins",
"units" : "mcg",
"value" : 262.0
},
{
"description" : "Vitamin A, RAE",
"group" : "Vitamins",
"units" : "mcg_RAE",
"value" : 271.0
},
{
"description" : "Vitamin C, total ascorbic acid",
"group" : "Vitamins",
"units" : "mg",
"value" : 0.0
},
{
"description" : "Thiamin",
"group" : "Vitamins",
"units" : "mg",
"value" : 0.0310
},
{
"description" : "Riboflavin",
"group" : "Vitamins",
"units" : "mg",
"value" : 0.45
},
{
"description" : "Niacin",
"group" : "Vitamins",
"units" : "mg",
"value" : 0.18
},
{
"description" : "Vitamin B-6",
"group" : "Vitamins",
"units" : "mg",
"value" : 0.0740
},
{
"description" : "Folate, total",
"group" : "Vitamins",
"units" : "mcg",
"value" : 18.0
},
{
"description" : "Vitamin B-12",
"group" : "Vitamins",
"units" : "mcg",
"value" : 0.27
},
{
"description" : "Cholesterol",
"group" : "Other",
"units" : "mg",
"value" : 93.0
},
{
"description" : "Fatty acids, total saturated",
"group" : "Other",
"units" : "g",
"value" : 18.584
},
{
"description" : "Fatty acids, total monounsaturated",
"group" : "Other",
"units" : "g",
"value" : 8.275
},
{
"description" : "Fatty acids, total polyunsaturated",
"group" : "Other",
"units" : "g",
"value" : 0.83
},
{
"description" : "Tryptophan",
"group" : "Amino Acids",
"units" : "g",
"value" : 0.324
},
{
"description" : "Threonine",
"group" : "Amino Acids",
"units" : "g",
"value" : 0.896
},
{
"description" : "Isoleucine",
"group" : "Amino Acids",
"units" : "g",
"value" : 1.563
},
{
"description" : "Leucine",
"group" : "Amino Acids",
"units" : "g",
"value" : 2.412
},
{
"description" : "Lysine",
"group" : "Amino Acids",
"units" : "g",
"value" : 2.0950
},
{
"description" : "Methionine",
"group" : "Amino Acids",
"units" : "g",
"value" : 0.659
},
{
"description" : "Cystine",
"group" : "Amino Acids",
"units" : "g",
"value" : 0.126
},
{
"description" : "Phenylalanine",
"group" : "Amino Acids",
"units" : "g",
"value" : 1.326
},
{
"description" : "Tyrosine",
"group" : "Amino Acids",
"units" : "g",
"value" : 1.216
},
{
"description" : "Valine",
"group" : "Amino Acids",
"units" : "g",
"value" : 1.682
},
{
"description" : "Arginine",
"group" : "Amino Acids",
"units" : "g",
"value" : 0.952
},
{
"description" : "Histidine",
"group" : "Amino Acids",
"units" : "g",
"value" : 0.884
},
{
"description" : "Alanine",
"group" : "Amino Acids",
"units" : "g",
"value" : 0.711
},
{
"description" : "Aspartic acid",
"group" : "Amino Acids",
"units" : "g",
"value" : 1.618
},
{
"description" : "Glutamic acid",
"group" : "Amino Acids",
"units" : "g",
"value" : 6.16
},
{
"description" : "Glycine",
"group" : "Amino Acids",
"units" : "g",
"value" : 0.439
},
{
"description" : "Proline",
"group" : "Amino Acids",
"units" : "g",
"value" : 2.838
},
{
"description" : "Serine",
"group" : "Amino Acids",
"units" : "g",
"value" : 1.472
}
],
"portions" : [
{
"amount" : 1,
"grams" : 28.35,
"unit" : "oz"
}
],
"tags" : []
}
}
I want the value of the parent node (cheese, Caraway) to be the variable. It will be selected from the drop down. Then, the description in the child node is to be the label and the "value" as data.
我希望父节点(cheese, Caraway)的值是变量。它将从下拉菜单中选择。然后，子节点中的描述将是标签，“值”作为数据。
1 个解决方案
#1
1
Try this:
试试这个:
I added dropdown select box on html.
我在html中添加了下拉选择框。
<select class="my"></select>
where option will come from json.
该选项将来自json。
and i added some own function.
我添加了一些函数。
var l = json.length, i, dd, filterData = [], defaultSelected = '';
defaultSelected = json[0].id;
for(i = 0; i < l; i++) {
dd = json[i];
filterData[dd.id] = dd.nutrients;
d3.select("select.my")
.append('option')
.attr("value", dd.id)
.append("text")
.text(dd.description);
}
and so on ...
等等……
SEE DEMO
看到演示
#1
1
Try this:
试试这个:
I added dropdown select box on html.
我在html中添加了下拉选择框。
<select class="my"></select>
where option will come from json.
该选项将来自json。
and i added some own function.
我添加了一些函数。
var l = json.length, i, dd, filterData = [], defaultSelected = '';
defaultSelected = json[0].id;
for(i = 0; i < l; i++) {
dd = json[i];
filterData[dd.id] = dd.nutrients;
d3.select("select.my")
.append('option')
.attr("value", dd.id)
.append("text")
.text(dd.description);
}
and so on ...
等等……
SEE DEMO
看到演示