如何在D3中從JSON請求數據？

Question

我在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" : []

}

我希望父節點（奶酪，Caraway）的值是變量。 從下拉菜單中選擇它。 然后，子節點中的描述將作為標簽，“值”作為數據。

Answer 1

嘗試這個：

我在html上添加了下拉選擇框。

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

其中選項將來自json。

並且我添加了一些自己的功能。

 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);
}

等等 ...

查看演示