如何在D3中从JSON请求数据？

Question

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.

{
  "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.

Answer 1

Try this:

I added dropdown select box on html.

<select class="my"></select>

where option will come from 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