如何在 d3 中从 json 请求数据

How to request data from json in d3?

本文关键字：json 请求 数据 中从 d3      更新时间：2023-09-26

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

}

我希望父节点（奶酪、葛缕子）的值成为变量。它将从下拉列表中选择。然后，子节点中的描述是标签，"值"是数据。

试试这个：

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

等等...

查看演示

相关文章：