javascript - 如何在给定比例下初始化缩放？-6ren

javascript - 如何在给定比例下初始化缩放？

转载作者：行者123 更新时间：2023-11-30 14:31:15

下面的代码是一个 d3.js 力定向图:

var graph = {  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1},
    {"id": "Mlle.Baptistine", "group": 1},
    {"id": "Mme.Magloire", "group": 1},
    {"id": "CountessdeLo", "group": 1},
    {"id": "Geborand", "group": 1},
    {"id": "Champtercier", "group": 1},
    {"id": "Cravatte", "group": 1},
    {"id": "Count", "group": 1},
    {"id": "OldMan", "group": 1},
    {"id": "Labarre", "group": 2},
    {"id": "Valjean", "group": 2},
    {"id": "Marguerite", "group": 3},
    {"id": "Mme.deR", "group": 2},
    {"id": "Isabeau", "group": 2},
    {"id": "Gervais", "group": 2},
    {"id": "Tholomyes", "group": 3},
    {"id": "Listolier", "group": 3},
    {"id": "Fameuil", "group": 3},
    {"id": "Blacheville", "group": 3},
    {"id": "Favourite", "group": 3},
    {"id": "Dahlia", "group": 3},
    {"id": "Zephine", "group": 3},
    {"id": "Fantine", "group": 3},
    {"id": "Mme.Thenardier", "group": 4},
    {"id": "Thenardier", "group": 4},
    {"id": "Cosette", "group": 5},
    {"id": "Javert", "group": 4},
    {"id": "Fauchelevent", "group": 0},
    {"id": "Bamatabois", "group": 2},
    {"id": "Perpetue", "group": 3},
    {"id": "Simplice", "group": 2},
    {"id": "Scaufflaire", "group": 2},
    {"id": "Woman1", "group": 2},
    {"id": "Judge", "group": 2},
    {"id": "Champmathieu", "group": 2},
    {"id": "Brevet", "group": 2},
    {"id": "Chenildieu", "group": 2},
    {"id": "Cochepaille", "group": 2},
    {"id": "Pontmercy", "group": 4},
    {"id": "Boulatruelle", "group": 6},
    {"id": "Eponine", "group": 4},
    {"id": "Anzelma", "group": 4},
    {"id": "Woman2", "group": 5},
    {"id": "MotherInnocent", "group": 0},
    {"id": "Gribier", "group": 0},
    {"id": "Jondrette", "group": 7},
    {"id": "Mme.Burgon", "group": 7},
    {"id": "Gavroche", "group": 8},
    {"id": "Gillenormand", "group": 5},
    {"id": "Magnon", "group": 5},
    {"id": "Mlle.Gillenormand", "group": 5},
    {"id": "Mme.Pontmercy", "group": 5},
    {"id": "Mlle.Vaubois", "group": 5},
    {"id": "Lt.Gillenormand", "group": 5},
    {"id": "Marius", "group": 8},
    {"id": "BaronessT", "group": 5},
    {"id": "Mabeuf", "group": 8},
    {"id": "Enjolras", "group": 8},
    {"id": "Combeferre", "group": 8},
    {"id": "Prouvaire", "group": 8},
    {"id": "Feuilly", "group": 8},
    {"id": "Courfeyrac", "group": 8},
    {"id": "Bahorel", "group": 8},
    {"id": "Bossuet", "group": 8},
    {"id": "Joly", "group": 8},
    {"id": "Grantaire", "group": 8},
    {"id": "MotherPlutarch", "group": 9},
    {"id": "Gueulemer", "group": 4},
    {"id": "Babet", "group": 4},
    {"id": "Claquesous", "group": 4},
    {"id": "Montparnasse", "group": 4},
    {"id": "Toussaint", "group": 5},
    {"id": "Child1", "group": 10},
    {"id": "Child2", "group": 10},
    {"id": "Brujon", "group": 4},
    {"id": "Mme.Hucheloup", "group": 8}
  ],
  "links": [
    {"source": "Napoleon", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8, "type":"A"},
    {"source": "Mme.Magloire", "target": "Myriel", "value": 10, "type":"A"},
    {"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6, "type":"A"},
    {"source": "CountessdeLo", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Geborand", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Champtercier", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Cravatte", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Count", "target": "Myriel", "value": 2, "type":"A"},
    {"source": "OldMan", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Valjean", "target": "Labarre", "value": 1, "type":"A"},
    {"source": "Valjean", "target": "Mme.Magloire", "value": 3, "type":"A"},
    {"source": "Valjean", "target": "Mlle.Baptistine", "value": 3, "type":"A"},
    {"source": "Valjean", "target": "Myriel", "value": 5, "type":"A"},
    {"source": "Marguerite", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Mme.deR", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Isabeau", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Gervais", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Listolier", "target": "Tholomyes", "value": 4, "type":"A"},
    {"source": "Fameuil", "target": "Tholomyes", "value": 4, "type":"A"},
    {"source": "Fameuil", "target": "Listolier", "value": 4, "type":"A"},
    {"source": "Blacheville", "target": "Tholomyes", "value": 4, "type":"A"},
    {"source": "Blacheville", "target": "Listolier", "value": 4, "type":"A"},
    {"source": "Blacheville", "target": "Fameuil", "value": 4, "type":"A"},
    {"source": "Favourite", "target": "Tholomyes", "value": 3, "type":"A"},
    {"source": "Favourite", "target": "Listolier", "value": 3, "type":"A"},
    {"source": "Favourite", "target": "Fameuil", "value": 3, "type":"A"},
    {"source": "Favourite", "target": "Blacheville", "value": 4, "type":"A"},
    {"source": "Dahlia", "target": "Tholomyes", "value": 3, "type":"A"},
    {"source": "Dahlia", "target": "Listolier", "value": 3, "type":"A"},
    {"source": "Dahlia", "target": "Fameuil", "value": 3, "type":"A"},
    {"source": "Dahlia", "target": "Blacheville", "value": 3, "type":"A"},
    {"source": "Dahlia", "target": "Favourite", "value": 5, "type":"A"},
    {"source": "Zephine", "target": "Tholomyes", "value": 3, "type":"A"},
    {"source": "Zephine", "target": "Listolier", "value": 3, "type":"A"},
    {"source": "Zephine", "target": "Fameuil", "value": 3, "type":"A"},
    {"source": "Zephine", "target": "Blacheville", "value": 3, "type":"A"},
    {"source": "Zephine", "target": "Favourite", "value": 4, "type":"A"},
    {"source": "Zephine", "target": "Dahlia", "value": 4, "type":"A"},
    {"source": "Fantine", "target": "Tholomyes", "value": 3, "type":"A"},
    {"source": "Fantine", "target": "Listolier", "value": 3, "type":"A"},
    {"source": "Fantine", "target": "Fameuil", "value": 3, "type":"A"},
    {"source": "Fantine", "target": "Blacheville", "value": 3, "type":"A"},
    {"source": "Fantine", "target": "Favourite", "value": 4, "type":"A"},
    {"source": "Fantine", "target": "Dahlia", "value": 4, "type":"A"},
    {"source": "Fantine", "target": "Zephine", "value": 4, "type":"A"},
    {"source": "Fantine", "target": "Marguerite", "value": 2, "type":"A"},
    {"source": "Fantine", "target": "Valjean", "value": 9, "type":"A"},
    {"source": "Mme.Thenardier", "target": "Fantine", "value": 2, "type":"A"},
    {"source": "Mme.Thenardier", "target": "Valjean", "value": 7, "type":"A"},
    {"source": "Thenardier", "target": "Mme.Thenardier", "value": 13, "type":"A"},
    {"source": "Thenardier", "target": "Fantine", "value": 1, "type":"A"},
    {"source": "Thenardier", "target": "Valjean", "value": 12, "type":"A"},
    {"source": "Cosette", "target": "Mme.Thenardier", "value": 4, "type":"A"},
    {"source": "Cosette", "target": "Valjean", "value": 31, "type":"A"},
    {"source": "Cosette", "target": "Tholomyes", "value": 1, "type":"A"},
    {"source": "Cosette", "target": "Thenardier", "value": 1, "type":"A"},
    {"source": "Javert", "target": "Valjean", "value": 17, "type":"A"},
    {"source": "Javert", "target": "Fantine", "value": 5, "type":"A"},
    {"source": "Javert", "target": "Thenardier", "value": 5, "type":"A"},
    {"source": "Javert", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Javert", "target": "Cosette", "value": 1, "type":"A"},
    {"source": "Fauchelevent", "target": "Valjean", "value": 8, "type":"A"},
    {"source": "Fauchelevent", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Bamatabois", "target": "Fantine", "value": 1, "type":"A"},
    {"source": "Bamatabois", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Bamatabois", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Perpetue", "target": "Fantine", "value": 1, "type":"A"},
    {"source": "Simplice", "target": "Perpetue", "value": 2, "type":"A"},
    {"source": "Simplice", "target": "Valjean", "value": 3, "type":"A"},
    {"source": "Simplice", "target": "Fantine", "value": 2, "type":"A"},
    {"source": "Simplice", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Scaufflaire", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Woman1", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Woman1", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Judge", "target": "Valjean", "value": 3, "type":"A"},
    {"source": "Judge", "target": "Bamatabois", "value": 2, "type":"A"},
    {"source": "Champmathieu", "target": "Valjean", "value": 3, "type":"A"},
    {"source": "Champmathieu", "target": "Judge", "value": 3, "type":"A"},
    {"source": "Champmathieu", "target": "Bamatabois", "value": 2, "type":"A"},
    {"source": "Brevet", "target": "Judge", "value": 2, "type":"A"},
    {"source": "Brevet", "target": "Champmathieu", "value": 2, "type":"A"},
    {"source": "Brevet", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Brevet", "target": "Bamatabois", "value": 1, "type":"A"},
    {"source": "Chenildieu", "target": "Judge", "value": 2, "type":"A"},
    {"source": "Chenildieu", "target": "Champmathieu", "value": 2, "type":"A"},
    {"source": "Chenildieu", "target": "Brevet", "value": 2, "type":"A"},
    {"source": "Chenildieu", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Chenildieu", "target": "Bamatabois", "value": 1, "type":"A"},
    {"source": "Cochepaille", "target": "Judge", "value": 2, "type":"A"},
    {"source": "Cochepaille", "target": "Champmathieu", "value": 2, "type":"A"},
    {"source": "Cochepaille", "target": "Brevet", "value": 2, "type":"A"},
    {"source": "Cochepaille", "target": "Chenildieu", "value": 2, "type":"A"},
    {"source": "Cochepaille", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Cochepaille", "target": "Bamatabois", "value": 1, "type":"A"},
    {"source": "Pontmercy", "target": "Thenardier", "value": 1, "type":"A"},
    {"source": "Boulatruelle", "target": "Thenardier", "value": 1, "type":"A"},
    {"source": "Eponine", "target": "Mme.Thenardier", "value": 2, "type":"A"},
    {"source": "Eponine", "target": "Thenardier", "value": 3, "type":"A"},
    {"source": "Anzelma", "target": "Eponine", "value": 2, "type":"A"},
    {"source": "Anzelma", "target": "Thenardier", "value": 2, "type":"A"},
    {"source": "Anzelma", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Woman2", "target": "Valjean", "value": 3, "type":"A"},
    {"source": "Woman2", "target": "Cosette", "value": 1, "type":"A"},
    {"source": "Woman2", "target": "Javert", "value": 1, "type":"A"},
    {"source": "MotherInnocent", "target": "Fauchelevent", "value": 3, "type":"A"},
    {"source": "MotherInnocent", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Gribier", "target": "Fauchelevent", "value": 2, "type":"A"},
    {"source": "Mme.Burgon", "target": "Jondrette", "value": 1, "type":"A"},
    {"source": "Gavroche", "target": "Mme.Burgon", "value": 2, "type":"A"},
    {"source": "Gavroche", "target": "Thenardier", "value": 1, "type":"A"},
    {"source": "Gavroche", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Gavroche", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Gillenormand", "target": "Cosette", "value": 3, "type":"A"},
    {"source": "Gillenormand", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Magnon", "target": "Gillenormand", "value": 1, "type":"A"},
    {"source": "Magnon", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9, "type":"A"},
    {"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2, "type":"A"},
    {"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1, "type":"A"},
    {"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1, "type":"A"},
    {"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1, "type":"A"},
    {"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2, "type":"A"},
    {"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1, "type":"A"},
    {"source": "Lt.Gillenormand", "target": "Cosette", "value": 1, "type":"A"},
    {"source": "Marius", "target": "Mlle.Gillenormand", "value": 6, "type":"A"},
    {"source": "Marius", "target": "Gillenormand", "value": 12, "type":"A"},
    {"source": "Marius", "target": "Pontmercy", "value": 1, "type":"A"},
    {"source": "Marius", "target": "Lt.Gillenormand", "value": 1, "type":"A"},
    {"source": "Marius", "target": "Cosette", "value": 21, "type":"A"},
    {"source": "Marius", "target": "Valjean", "value": 19, "type":"A"},
    {"source": "Marius", "target": "Tholomyes", "value": 1, "type":"A"},
    {"source": "Marius", "target": "Thenardier", "value": 2, "type":"A"},
    {"source": "Marius", "target": "Eponine", "value": 5, "type":"A"},
    {"source": "Marius", "target": "Gavroche", "value": 4, "type":"A"},
    {"source": "BaronessT", "target": "Gillenormand", "value": 1, "type":"A"},
    {"source": "BaronessT", "target": "Marius", "value": 1, "type":"A"},
    {"source": "Mabeuf", "target": "Marius", "value": 1, "type":"A"},
    {"source": "Mabeuf", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Mabeuf", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Enjolras", "target": "Marius", "value": 7, "type":"A"},
    {"source": "Enjolras", "target": "Gavroche", "value": 7, "type":"A"},
    {"source": "Enjolras", "target": "Javert", "value": 6, "type":"A"},
    {"source": "Enjolras", "target": "Mabeuf", "value": 1, "type":"A"},
    {"source": "Enjolras", "target": "Valjean", "value": 4, "type":"A"},
    {"source": "Combeferre", "target": "Enjolras", "value": 15, "type":"A"},
    {"source": "Combeferre", "target": "Marius", "value": 5, "type":"A"},
    {"source": "Combeferre", "target": "Gavroche", "value": 6, "type":"A"},
    {"source": "Combeferre", "target": "Mabeuf", "value": 2, "type":"A"},
    {"source": "Prouvaire", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Prouvaire", "target": "Enjolras", "value": 4, "type":"A"},
    {"source": "Prouvaire", "target": "Combeferre", "value": 2, "type":"A"},
    {"source": "Feuilly", "target": "Gavroche", "value": 2, "type":"A"},
    {"source": "Feuilly", "target": "Enjolras", "value": 6, "type":"A"},
    {"source": "Feuilly", "target": "Prouvaire", "value": 2, "type":"A"},
    {"source": "Feuilly", "target": "Combeferre", "value": 5, "type":"A"},
    {"source": "Feuilly", "target": "Mabeuf", "value": 1, "type":"A"},
    {"source": "Feuilly", "target": "Marius", "value": 1, "type":"A"},
    {"source": "Courfeyrac", "target": "Marius", "value": 9, "type":"A"},
    {"source": "Courfeyrac", "target": "Enjolras", "value": 17, "type":"A"},
    {"source": "Courfeyrac", "target": "Combeferre", "value": 13, "type":"A"},
    {"source": "Courfeyrac", "target": "Gavroche", "value": 7, "type":"A"},
    {"source": "Courfeyrac", "target": "Mabeuf", "value": 2, "type":"A"},
    {"source": "Courfeyrac", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Courfeyrac", "target": "Feuilly", "value": 6, "type":"A"},
    {"source": "Courfeyrac", "target": "Prouvaire", "value": 3, "type":"A"},
    {"source": "Bahorel", "target": "Combeferre", "value": 5, "type":"A"},
    {"source": "Bahorel", "target": "Gavroche", "value": 5, "type":"A"},
    {"source": "Bahorel", "target": "Courfeyrac", "value": 6, "type":"A"},
    {"source": "Bahorel", "target": "Mabeuf", "value": 2, "type":"A"},
    {"source": "Bahorel", "target": "Enjolras", "value": 4, "type":"A"},
    {"source": "Bahorel", "target": "Feuilly", "value": 3, "type":"A"},
    {"source": "Bahorel", "target": "Prouvaire", "value": 2, "type":"A"},
    {"source": "Bahorel", "target": "Marius", "value": 1, "type":"A"},
    {"source": "Bossuet", "target": "Marius", "value": 5, "type":"A"},
    {"source": "Bossuet", "target": "Courfeyrac", "value": 12, "type":"A"},
    {"source": "Bossuet", "target": "Gavroche", "value": 5, "type":"A"},
    {"source": "Bossuet", "target": "Bahorel", "value": 4, "type":"A"},
    {"source": "Bossuet", "target": "Enjolras", "value": 10, "type":"A"},
    {"source": "Bossuet", "target": "Feuilly", "value": 6, "type":"A"},
    {"source": "Bossuet", "target": "Prouvaire", "value": 2, "type":"A"},
    {"source": "Bossuet", "target": "Combeferre", "value": 9, "type":"A"},
    {"source": "Bossuet", "target": "Mabeuf", "value": 1, "type":"A"},
    {"source": "Bossuet", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Joly", "target": "Bahorel", "value": 5, "type":"A"},
    {"source": "Joly", "target": "Bossuet", "value": 7, "type":"A"},
    {"source": "Joly", "target": "Gavroche", "value": 3, "type":"A"},
    {"source": "Joly", "target": "Courfeyrac", "value": 5, "type":"A"},
    {"source": "Joly", "target": "Enjolras", "value": 5, "type":"A"},
    {"source": "Joly", "target": "Feuilly", "value": 5, "type":"A"},
    {"source": "Joly", "target": "Prouvaire", "value": 2, "type":"A"},
    {"source": "Joly", "target": "Combeferre", "value": 5, "type":"A"},
    {"source": "Joly", "target": "Mabeuf", "value": 1, "type":"A"},
    {"source": "Joly", "target": "Marius", "value": 2, "type":"A"},
    {"source": "Grantaire", "target": "Bossuet", "value": 3, "type":"A"},
    {"source": "Grantaire", "target": "Enjolras", "value": 3, "type":"A"},
    {"source": "Grantaire", "target": "Combeferre", "value": 1, "type":"A"},
    {"source": "Grantaire", "target": "Courfeyrac", "value": 2, "type":"A"},
    {"source": "Grantaire", "target": "Joly", "value": 2, "type":"A"},
    {"source": "Grantaire", "target": "Gavroche", "value": 1 , "type":"A"},
    {"source": "Grantaire", "target": "Bahorel", "value": 1, "type":"A"},
    {"source": "Grantaire", "target": "Feuilly", "value": 1, "type":"A"},
    {"source": "Grantaire", "target": "Prouvaire", "value": 1, "type":"A"},
    {"source": "MotherPlutarch", "target": "Mabeuf", "value": 3, "type":"A"},
    {"source": "Gueulemer", "target": "Thenardier", "value": 5, "type":"A"},
    {"source": "Gueulemer", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Gueulemer", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Gueulemer", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Gueulemer", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Babet", "target": "Thenardier", "value": 6, "type":"A"},
    {"source": "Babet", "target": "Gueulemer", "value": 6, "type":"A"},
    {"source": "Babet", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Babet", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Babet", "target": "Javert", "value": 2, "type":"A"},
    {"source": "Babet", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Babet", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Claquesous", "target": "Thenardier", "value": 4, "type":"A"},
    {"source": "Claquesous", "target": "Babet", "value": 4, "type":"A"},
    {"source": "Claquesous", "target": "Gueulemer", "value": 4, "type":"A"},
    {"source": "Claquesous", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Claquesous", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Claquesous", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Claquesous", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Claquesous", "target": "Enjolras", "value": 1, "type":"A"},
    {"source": "Montparnasse", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Montparnasse", "target": "Babet", "value": 2, "type":"A"},
    {"source": "Montparnasse", "target": "Gueulemer", "value": 2, "type":"A"},
    {"source": "Montparnasse", "target": "Claquesous", "value": 2, "type":"A"},
    {"source": "Montparnasse", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Montparnasse", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Montparnasse", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Montparnasse", "target": "Thenardier", "value": 1, "type":"A"},
    {"source": "Toussaint", "target": "Cosette", "value": 2, "type":"A"},
    {"source": "Toussaint", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Toussaint", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Child1", "target": "Gavroche", "value": 2, "type":"A"},
    {"source": "Child2", "target": "Gavroche", "value": 2, "type":"A"},
    {"source": "Child2", "target": "Child1", "value": 3, "type":"A"},
    {"source": "Brujon", "target": "Babet", "value": 3, "type":"A"},
    {"source": "Brujon", "target": "Gueulemer", "value": 3, "type":"A"},
    {"source": "Brujon", "target": "Thenardier", "value": 3, "type":"A"},
    {"source": "Brujon", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Brujon", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Brujon", "target": "Claquesous", "value": 1, "type":"A"},
    {"source": "Brujon", "target": "Montparnasse", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Joly", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1, "type":"A"}
  ]
};
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);
  
  var zoom_handler = d3.zoom()
 .on("zoom", zoom_actions);

 zoom_handler(svg);   

    var simulation = d3.forceSimulation()
        .force("link", d3.forceLink().distance(300).id(function(d) {
            return d.id;
        }))
        .force("charge", d3.forceManyBody().strength(-300))
        .force("center", d3.forceCenter(width / 2, height / 2));
  
  var g = svg.append("g")
.attr("class", "everything");


  var link = g.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
      .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = g.append("g")
      .attr("class", "nodes")
    .selectAll("g")
    .data(graph.nodes)
    .enter().append("g")

	
	  var circles = node.append("circle")
      .attr("r", 8)
      .attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

	var lables = node.append("text") // Labeling for nodes
      .text(function(d) {
        return d.id;
      })
      .attr('x', 6)
      .attr('y', 3);

  node.append("title") 
      .text(function(d) { return d.id; });
 
  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(graph.links);

  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
  node 
        .attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        })
  
};

      function zoom_actions(){
 g.attr("transform", d3.event.transform)
 }
  
function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #000;
  stroke-width: 1.5px;
}

text {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 10px;
}

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="shortcut icon" href="//#" />

</style>
<html>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


</html>
</div>

<svg width="798" height="400"></svg>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>

但是，在初始加载时，缩放级别太接近并且看起来不太好。

有什么方法可以进一步设置初始缩放级别，这样我就不必自己缩小了。

我曾尝试使用以下代码，但它似乎不适合我目前的情况。任何建议将不胜感激，谢谢!

var zoom = d3.zoom().on("zoom", zooming);

vis = svg.append("svg:svg")
     .attr("width", width)
     .attr("height", height)
     .call(zoom) // here
     .call(zoom.transform, d3.zoomIdentity.translate(100, 50).scale(0.5))
     .append("svg:g")
     .attr("transform","translate(100,50) scale(.5,.5)");

最佳答案

您的方向是正确的。这是您的代码的修改版本，它初始化缩放以便在父容器中拥有整个布局:

var graph = {  "nodes": [
    {"id": "Myriel", "group": 1},
    {"id": "Napoleon", "group": 1},
    {"id": "Mlle.Baptistine", "group": 1},
    {"id": "Mme.Magloire", "group": 1},
    {"id": "CountessdeLo", "group": 1},
    {"id": "Geborand", "group": 1},
    {"id": "Champtercier", "group": 1},
    {"id": "Cravatte", "group": 1},
    {"id": "Count", "group": 1},
    {"id": "OldMan", "group": 1},
    {"id": "Labarre", "group": 2},
    {"id": "Valjean", "group": 2},
    {"id": "Marguerite", "group": 3},
    {"id": "Mme.deR", "group": 2},
    {"id": "Isabeau", "group": 2},
    {"id": "Gervais", "group": 2},
    {"id": "Tholomyes", "group": 3},
    {"id": "Listolier", "group": 3},
    {"id": "Fameuil", "group": 3},
    {"id": "Blacheville", "group": 3},
    {"id": "Favourite", "group": 3},
    {"id": "Dahlia", "group": 3},
    {"id": "Zephine", "group": 3},
    {"id": "Fantine", "group": 3},
    {"id": "Mme.Thenardier", "group": 4},
    {"id": "Thenardier", "group": 4},
    {"id": "Cosette", "group": 5},
    {"id": "Javert", "group": 4},
    {"id": "Fauchelevent", "group": 0},
    {"id": "Bamatabois", "group": 2},
    {"id": "Perpetue", "group": 3},
    {"id": "Simplice", "group": 2},
    {"id": "Scaufflaire", "group": 2},
    {"id": "Woman1", "group": 2},
    {"id": "Judge", "group": 2},
    {"id": "Champmathieu", "group": 2},
    {"id": "Brevet", "group": 2},
    {"id": "Chenildieu", "group": 2},
    {"id": "Cochepaille", "group": 2},
    {"id": "Pontmercy", "group": 4},
    {"id": "Boulatruelle", "group": 6},
    {"id": "Eponine", "group": 4},
    {"id": "Anzelma", "group": 4},
    {"id": "Woman2", "group": 5},
    {"id": "MotherInnocent", "group": 0},
    {"id": "Gribier", "group": 0},
    {"id": "Jondrette", "group": 7},
    {"id": "Mme.Burgon", "group": 7},
    {"id": "Gavroche", "group": 8},
    {"id": "Gillenormand", "group": 5},
    {"id": "Magnon", "group": 5},
    {"id": "Mlle.Gillenormand", "group": 5},
    {"id": "Mme.Pontmercy", "group": 5},
    {"id": "Mlle.Vaubois", "group": 5},
    {"id": "Lt.Gillenormand", "group": 5},
    {"id": "Marius", "group": 8},
    {"id": "BaronessT", "group": 5},
    {"id": "Mabeuf", "group": 8},
    {"id": "Enjolras", "group": 8},
    {"id": "Combeferre", "group": 8},
    {"id": "Prouvaire", "group": 8},
    {"id": "Feuilly", "group": 8},
    {"id": "Courfeyrac", "group": 8},
    {"id": "Bahorel", "group": 8},
    {"id": "Bossuet", "group": 8},
    {"id": "Joly", "group": 8},
    {"id": "Grantaire", "group": 8},
    {"id": "MotherPlutarch", "group": 9},
    {"id": "Gueulemer", "group": 4},
    {"id": "Babet", "group": 4},
    {"id": "Claquesous", "group": 4},
    {"id": "Montparnasse", "group": 4},
    {"id": "Toussaint", "group": 5},
    {"id": "Child1", "group": 10},
    {"id": "Child2", "group": 10},
    {"id": "Brujon", "group": 4},
    {"id": "Mme.Hucheloup", "group": 8}
  ],
  "links": [
    {"source": "Napoleon", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8, "type":"A"},
    {"source": "Mme.Magloire", "target": "Myriel", "value": 10, "type":"A"},
    {"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6, "type":"A"},
    {"source": "CountessdeLo", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Geborand", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Champtercier", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Cravatte", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Count", "target": "Myriel", "value": 2, "type":"A"},
    {"source": "OldMan", "target": "Myriel", "value": 1, "type":"A"},
    {"source": "Valjean", "target": "Labarre", "value": 1, "type":"A"},
    {"source": "Valjean", "target": "Mme.Magloire", "value": 3, "type":"A"},
    {"source": "Valjean", "target": "Mlle.Baptistine", "value": 3, "type":"A"},
    {"source": "Valjean", "target": "Myriel", "value": 5, "type":"A"},
    {"source": "Marguerite", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Mme.deR", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Isabeau", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Gervais", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Listolier", "target": "Tholomyes", "value": 4, "type":"A"},
    {"source": "Fameuil", "target": "Tholomyes", "value": 4, "type":"A"},
    {"source": "Fameuil", "target": "Listolier", "value": 4, "type":"A"},
    {"source": "Blacheville", "target": "Tholomyes", "value": 4, "type":"A"},
    {"source": "Blacheville", "target": "Listolier", "value": 4, "type":"A"},
    {"source": "Blacheville", "target": "Fameuil", "value": 4, "type":"A"},
    {"source": "Favourite", "target": "Tholomyes", "value": 3, "type":"A"},
    {"source": "Favourite", "target": "Listolier", "value": 3, "type":"A"},
    {"source": "Favourite", "target": "Fameuil", "value": 3, "type":"A"},
    {"source": "Favourite", "target": "Blacheville", "value": 4, "type":"A"},
    {"source": "Dahlia", "target": "Tholomyes", "value": 3, "type":"A"},
    {"source": "Dahlia", "target": "Listolier", "value": 3, "type":"A"},
    {"source": "Dahlia", "target": "Fameuil", "value": 3, "type":"A"},
    {"source": "Dahlia", "target": "Blacheville", "value": 3, "type":"A"},
    {"source": "Dahlia", "target": "Favourite", "value": 5, "type":"A"},
    {"source": "Zephine", "target": "Tholomyes", "value": 3, "type":"A"},
    {"source": "Zephine", "target": "Listolier", "value": 3, "type":"A"},
    {"source": "Zephine", "target": "Fameuil", "value": 3, "type":"A"},
    {"source": "Zephine", "target": "Blacheville", "value": 3, "type":"A"},
    {"source": "Zephine", "target": "Favourite", "value": 4, "type":"A"},
    {"source": "Zephine", "target": "Dahlia", "value": 4, "type":"A"},
    {"source": "Fantine", "target": "Tholomyes", "value": 3, "type":"A"},
    {"source": "Fantine", "target": "Listolier", "value": 3, "type":"A"},
    {"source": "Fantine", "target": "Fameuil", "value": 3, "type":"A"},
    {"source": "Fantine", "target": "Blacheville", "value": 3, "type":"A"},
    {"source": "Fantine", "target": "Favourite", "value": 4, "type":"A"},
    {"source": "Fantine", "target": "Dahlia", "value": 4, "type":"A"},
    {"source": "Fantine", "target": "Zephine", "value": 4, "type":"A"},
    {"source": "Fantine", "target": "Marguerite", "value": 2, "type":"A"},
    {"source": "Fantine", "target": "Valjean", "value": 9, "type":"A"},
    {"source": "Mme.Thenardier", "target": "Fantine", "value": 2, "type":"A"},
    {"source": "Mme.Thenardier", "target": "Valjean", "value": 7, "type":"A"},
    {"source": "Thenardier", "target": "Mme.Thenardier", "value": 13, "type":"A"},
    {"source": "Thenardier", "target": "Fantine", "value": 1, "type":"A"},
    {"source": "Thenardier", "target": "Valjean", "value": 12, "type":"A"},
    {"source": "Cosette", "target": "Mme.Thenardier", "value": 4, "type":"A"},
    {"source": "Cosette", "target": "Valjean", "value": 31, "type":"A"},
    {"source": "Cosette", "target": "Tholomyes", "value": 1, "type":"A"},
    {"source": "Cosette", "target": "Thenardier", "value": 1, "type":"A"},
    {"source": "Javert", "target": "Valjean", "value": 17, "type":"A"},
    {"source": "Javert", "target": "Fantine", "value": 5, "type":"A"},
    {"source": "Javert", "target": "Thenardier", "value": 5, "type":"A"},
    {"source": "Javert", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Javert", "target": "Cosette", "value": 1, "type":"A"},
    {"source": "Fauchelevent", "target": "Valjean", "value": 8, "type":"A"},
    {"source": "Fauchelevent", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Bamatabois", "target": "Fantine", "value": 1, "type":"A"},
    {"source": "Bamatabois", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Bamatabois", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Perpetue", "target": "Fantine", "value": 1, "type":"A"},
    {"source": "Simplice", "target": "Perpetue", "value": 2, "type":"A"},
    {"source": "Simplice", "target": "Valjean", "value": 3, "type":"A"},
    {"source": "Simplice", "target": "Fantine", "value": 2, "type":"A"},
    {"source": "Simplice", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Scaufflaire", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Woman1", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Woman1", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Judge", "target": "Valjean", "value": 3, "type":"A"},
    {"source": "Judge", "target": "Bamatabois", "value": 2, "type":"A"},
    {"source": "Champmathieu", "target": "Valjean", "value": 3, "type":"A"},
    {"source": "Champmathieu", "target": "Judge", "value": 3, "type":"A"},
    {"source": "Champmathieu", "target": "Bamatabois", "value": 2, "type":"A"},
    {"source": "Brevet", "target": "Judge", "value": 2, "type":"A"},
    {"source": "Brevet", "target": "Champmathieu", "value": 2, "type":"A"},
    {"source": "Brevet", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Brevet", "target": "Bamatabois", "value": 1, "type":"A"},
    {"source": "Chenildieu", "target": "Judge", "value": 2, "type":"A"},
    {"source": "Chenildieu", "target": "Champmathieu", "value": 2, "type":"A"},
    {"source": "Chenildieu", "target": "Brevet", "value": 2, "type":"A"},
    {"source": "Chenildieu", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Chenildieu", "target": "Bamatabois", "value": 1, "type":"A"},
    {"source": "Cochepaille", "target": "Judge", "value": 2, "type":"A"},
    {"source": "Cochepaille", "target": "Champmathieu", "value": 2, "type":"A"},
    {"source": "Cochepaille", "target": "Brevet", "value": 2, "type":"A"},
    {"source": "Cochepaille", "target": "Chenildieu", "value": 2, "type":"A"},
    {"source": "Cochepaille", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Cochepaille", "target": "Bamatabois", "value": 1, "type":"A"},
    {"source": "Pontmercy", "target": "Thenardier", "value": 1, "type":"A"},
    {"source": "Boulatruelle", "target": "Thenardier", "value": 1, "type":"A"},
    {"source": "Eponine", "target": "Mme.Thenardier", "value": 2, "type":"A"},
    {"source": "Eponine", "target": "Thenardier", "value": 3, "type":"A"},
    {"source": "Anzelma", "target": "Eponine", "value": 2, "type":"A"},
    {"source": "Anzelma", "target": "Thenardier", "value": 2, "type":"A"},
    {"source": "Anzelma", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Woman2", "target": "Valjean", "value": 3, "type":"A"},
    {"source": "Woman2", "target": "Cosette", "value": 1, "type":"A"},
    {"source": "Woman2", "target": "Javert", "value": 1, "type":"A"},
    {"source": "MotherInnocent", "target": "Fauchelevent", "value": 3, "type":"A"},
    {"source": "MotherInnocent", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Gribier", "target": "Fauchelevent", "value": 2, "type":"A"},
    {"source": "Mme.Burgon", "target": "Jondrette", "value": 1, "type":"A"},
    {"source": "Gavroche", "target": "Mme.Burgon", "value": 2, "type":"A"},
    {"source": "Gavroche", "target": "Thenardier", "value": 1, "type":"A"},
    {"source": "Gavroche", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Gavroche", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Gillenormand", "target": "Cosette", "value": 3, "type":"A"},
    {"source": "Gillenormand", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Magnon", "target": "Gillenormand", "value": 1, "type":"A"},
    {"source": "Magnon", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9, "type":"A"},
    {"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2, "type":"A"},
    {"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2, "type":"A"},
    {"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1, "type":"A"},
    {"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1, "type":"A"},
    {"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1, "type":"A"},
    {"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2, "type":"A"},
    {"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1, "type":"A"},
    {"source": "Lt.Gillenormand", "target": "Cosette", "value": 1, "type":"A"},
    {"source": "Marius", "target": "Mlle.Gillenormand", "value": 6, "type":"A"},
    {"source": "Marius", "target": "Gillenormand", "value": 12, "type":"A"},
    {"source": "Marius", "target": "Pontmercy", "value": 1, "type":"A"},
    {"source": "Marius", "target": "Lt.Gillenormand", "value": 1, "type":"A"},
    {"source": "Marius", "target": "Cosette", "value": 21, "type":"A"},
    {"source": "Marius", "target": "Valjean", "value": 19, "type":"A"},
    {"source": "Marius", "target": "Tholomyes", "value": 1, "type":"A"},
    {"source": "Marius", "target": "Thenardier", "value": 2, "type":"A"},
    {"source": "Marius", "target": "Eponine", "value": 5, "type":"A"},
    {"source": "Marius", "target": "Gavroche", "value": 4, "type":"A"},
    {"source": "BaronessT", "target": "Gillenormand", "value": 1, "type":"A"},
    {"source": "BaronessT", "target": "Marius", "value": 1, "type":"A"},
    {"source": "Mabeuf", "target": "Marius", "value": 1, "type":"A"},
    {"source": "Mabeuf", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Mabeuf", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Enjolras", "target": "Marius", "value": 7, "type":"A"},
    {"source": "Enjolras", "target": "Gavroche", "value": 7, "type":"A"},
    {"source": "Enjolras", "target": "Javert", "value": 6, "type":"A"},
    {"source": "Enjolras", "target": "Mabeuf", "value": 1, "type":"A"},
    {"source": "Enjolras", "target": "Valjean", "value": 4, "type":"A"},
    {"source": "Combeferre", "target": "Enjolras", "value": 15, "type":"A"},
    {"source": "Combeferre", "target": "Marius", "value": 5, "type":"A"},
    {"source": "Combeferre", "target": "Gavroche", "value": 6, "type":"A"},
    {"source": "Combeferre", "target": "Mabeuf", "value": 2, "type":"A"},
    {"source": "Prouvaire", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Prouvaire", "target": "Enjolras", "value": 4, "type":"A"},
    {"source": "Prouvaire", "target": "Combeferre", "value": 2, "type":"A"},
    {"source": "Feuilly", "target": "Gavroche", "value": 2, "type":"A"},
    {"source": "Feuilly", "target": "Enjolras", "value": 6, "type":"A"},
    {"source": "Feuilly", "target": "Prouvaire", "value": 2, "type":"A"},
    {"source": "Feuilly", "target": "Combeferre", "value": 5, "type":"A"},
    {"source": "Feuilly", "target": "Mabeuf", "value": 1, "type":"A"},
    {"source": "Feuilly", "target": "Marius", "value": 1, "type":"A"},
    {"source": "Courfeyrac", "target": "Marius", "value": 9, "type":"A"},
    {"source": "Courfeyrac", "target": "Enjolras", "value": 17, "type":"A"},
    {"source": "Courfeyrac", "target": "Combeferre", "value": 13, "type":"A"},
    {"source": "Courfeyrac", "target": "Gavroche", "value": 7, "type":"A"},
    {"source": "Courfeyrac", "target": "Mabeuf", "value": 2, "type":"A"},
    {"source": "Courfeyrac", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Courfeyrac", "target": "Feuilly", "value": 6, "type":"A"},
    {"source": "Courfeyrac", "target": "Prouvaire", "value": 3, "type":"A"},
    {"source": "Bahorel", "target": "Combeferre", "value": 5, "type":"A"},
    {"source": "Bahorel", "target": "Gavroche", "value": 5, "type":"A"},
    {"source": "Bahorel", "target": "Courfeyrac", "value": 6, "type":"A"},
    {"source": "Bahorel", "target": "Mabeuf", "value": 2, "type":"A"},
    {"source": "Bahorel", "target": "Enjolras", "value": 4, "type":"A"},
    {"source": "Bahorel", "target": "Feuilly", "value": 3, "type":"A"},
    {"source": "Bahorel", "target": "Prouvaire", "value": 2, "type":"A"},
    {"source": "Bahorel", "target": "Marius", "value": 1, "type":"A"},
    {"source": "Bossuet", "target": "Marius", "value": 5, "type":"A"},
    {"source": "Bossuet", "target": "Courfeyrac", "value": 12, "type":"A"},
    {"source": "Bossuet", "target": "Gavroche", "value": 5, "type":"A"},
    {"source": "Bossuet", "target": "Bahorel", "value": 4, "type":"A"},
    {"source": "Bossuet", "target": "Enjolras", "value": 10, "type":"A"},
    {"source": "Bossuet", "target": "Feuilly", "value": 6, "type":"A"},
    {"source": "Bossuet", "target": "Prouvaire", "value": 2, "type":"A"},
    {"source": "Bossuet", "target": "Combeferre", "value": 9, "type":"A"},
    {"source": "Bossuet", "target": "Mabeuf", "value": 1, "type":"A"},
    {"source": "Bossuet", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Joly", "target": "Bahorel", "value": 5, "type":"A"},
    {"source": "Joly", "target": "Bossuet", "value": 7, "type":"A"},
    {"source": "Joly", "target": "Gavroche", "value": 3, "type":"A"},
    {"source": "Joly", "target": "Courfeyrac", "value": 5, "type":"A"},
    {"source": "Joly", "target": "Enjolras", "value": 5, "type":"A"},
    {"source": "Joly", "target": "Feuilly", "value": 5, "type":"A"},
    {"source": "Joly", "target": "Prouvaire", "value": 2, "type":"A"},
    {"source": "Joly", "target": "Combeferre", "value": 5, "type":"A"},
    {"source": "Joly", "target": "Mabeuf", "value": 1, "type":"A"},
    {"source": "Joly", "target": "Marius", "value": 2, "type":"A"},
    {"source": "Grantaire", "target": "Bossuet", "value": 3, "type":"A"},
    {"source": "Grantaire", "target": "Enjolras", "value": 3, "type":"A"},
    {"source": "Grantaire", "target": "Combeferre", "value": 1, "type":"A"},
    {"source": "Grantaire", "target": "Courfeyrac", "value": 2, "type":"A"},
    {"source": "Grantaire", "target": "Joly", "value": 2, "type":"A"},
    {"source": "Grantaire", "target": "Gavroche", "value": 1 , "type":"A"},
    {"source": "Grantaire", "target": "Bahorel", "value": 1, "type":"A"},
    {"source": "Grantaire", "target": "Feuilly", "value": 1, "type":"A"},
    {"source": "Grantaire", "target": "Prouvaire", "value": 1, "type":"A"},
    {"source": "MotherPlutarch", "target": "Mabeuf", "value": 3, "type":"A"},
    {"source": "Gueulemer", "target": "Thenardier", "value": 5, "type":"A"},
    {"source": "Gueulemer", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Gueulemer", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Gueulemer", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Gueulemer", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Babet", "target": "Thenardier", "value": 6, "type":"A"},
    {"source": "Babet", "target": "Gueulemer", "value": 6, "type":"A"},
    {"source": "Babet", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Babet", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Babet", "target": "Javert", "value": 2, "type":"A"},
    {"source": "Babet", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Babet", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Claquesous", "target": "Thenardier", "value": 4, "type":"A"},
    {"source": "Claquesous", "target": "Babet", "value": 4, "type":"A"},
    {"source": "Claquesous", "target": "Gueulemer", "value": 4, "type":"A"},
    {"source": "Claquesous", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Claquesous", "target": "Mme.Thenardier", "value": 1, "type":"A"},
    {"source": "Claquesous", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Claquesous", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Claquesous", "target": "Enjolras", "value": 1, "type":"A"},
    {"source": "Montparnasse", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Montparnasse", "target": "Babet", "value": 2, "type":"A"},
    {"source": "Montparnasse", "target": "Gueulemer", "value": 2, "type":"A"},
    {"source": "Montparnasse", "target": "Claquesous", "value": 2, "type":"A"},
    {"source": "Montparnasse", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Montparnasse", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Montparnasse", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Montparnasse", "target": "Thenardier", "value": 1, "type":"A"},
    {"source": "Toussaint", "target": "Cosette", "value": 2, "type":"A"},
    {"source": "Toussaint", "target": "Javert", "value": 1, "type":"A"},
    {"source": "Toussaint", "target": "Valjean", "value": 1, "type":"A"},
    {"source": "Child1", "target": "Gavroche", "value": 2, "type":"A"},
    {"source": "Child2", "target": "Gavroche", "value": 2, "type":"A"},
    {"source": "Child2", "target": "Child1", "value": 3, "type":"A"},
    {"source": "Brujon", "target": "Babet", "value": 3, "type":"A"},
    {"source": "Brujon", "target": "Gueulemer", "value": 3, "type":"A"},
    {"source": "Brujon", "target": "Thenardier", "value": 3, "type":"A"},
    {"source": "Brujon", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Brujon", "target": "Eponine", "value": 1, "type":"A"},
    {"source": "Brujon", "target": "Claquesous", "value": 1, "type":"A"},
    {"source": "Brujon", "target": "Montparnasse", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Joly", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1, "type":"A"},
    {"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1, "type":"A"}
  ]
};
var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var zoom_handler = d3.zoom().on("zoom", zoom_actions);

// zoom_handler(svg);

var simulation = d3.forceSimulation()
.force("link", d3.forceLink().distance(300).id(function(d) {
  return d.id;
}))
.force("charge", d3.forceManyBody().strength(-300))
.force("center", d3.forceCenter(width / 2, height / 2));

var g = svg.append("g")
.attr("class", "everything");

svg.call(zoom_handler)
  .call(zoom_handler.transform, d3.zoomIdentity.translate(200, 150).scale(0.2));

var link = g.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = g.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")


var circles = node.append("circle")
.attr("r", 8)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));

var lables = node.append("text") // Labeling for nodes
.text(function(d) {
  return d.id;
})
.attr('x', 6)
.attr('y', 3);

node.append("title")
.text(function(d) { return d.id; });

simulation
.nodes(graph.nodes)
.on("tick", ticked);

simulation.force("link")
.links(graph.links);

function ticked() {
  link
  .attr("x1", function(d) { return d.source.x; })
  .attr("y1", function(d) { return d.source.y; })
  .attr("x2", function(d) { return d.target.x; })
  .attr("y2", function(d) { return d.target.y; });
  node
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  })

};

function zoom_actions(){
  g.attr("transform", d3.event.transform)
}

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #000;
  stroke-width: 1.5px;
}

text {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 10px;
}

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="shortcut icon" href="//#" />

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


</html>
</div>

<svg width="798" height="400"></svg>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>

唯一的变化在于通过使用 scale 转换调用 transform 操作来设置缩放的初始状态(translate 步骤是在那里将布局居中):

svg.call(zoom_handler)
  .call(zoom_handler.transform, d3.zoomIdentity.translate(200, 150).scale(0.2));

在这里，我缩小了 5 (scale(1/5))。

Here是完整的 d3-zoom api 和 here是 zoom.scale 文档。

关于javascript - 如何在给定比例下初始化缩放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51132685/

文章推荐： javascript - 通过 Direct Line 在可折叠窗口中嵌入 Microsoft Bot

文章推荐： c# - DataTable.Select() 不工作

文章推荐： c# - Google 电子表格 API C# 批量更新时缺少资源版本 ID

html - 导航栏损坏取决于屏幕尺寸/比例/比例
所以基本上我有一个导航栏，我只想有一定的宽度。它有 4 个元素，我希望它正好是这些元素的宽度。这是它在我的工作计算机上的样子。这正是我想要的样子。导航栏在最后一个元素的末尾完美结束，并且居中。我自己
ffmpeg 比例、重叠和不透明度
如何将多个过滤器链接到一个视频中？基本上 - 我有一个叠加图像(透明 gif)，想要将它居中，并为 gif 应用 30% 的不透明度。这就是我所拥有的: ffmpeg -i inputmovie.m
ffmpeg 比例，如何正确裁剪
我正在使用此命令对视频进行编码 $transcode = FFMPEG_BINARY.' -loglevel panic -y -i "'.$files['original'].'" -vf scal
laravel - 照片滑动图像大小/比例
我正在使用 Laravel 网站，包括照片滑动 . 这是我的问题:当我单击照片时，它会以预定义的高度和宽度(在我的情况下为 764X480)弹出。我希望我的照片以原始比例打开，而不是预定义的(因为我
dplyr 的相对频率/比例
假设我想计算每个组中不同值的比例。例如，使用 mtcars 数据，如何计算 am 的齿轮数量的相对频率(自动/手动)用 dplyr 一次性完成？ library(dplyr) data(mtcars)
python - 当标记设置为像素时如何更改图例中的标记大小/比例
我用一个非常小的标记散点图数据点(见下面的屏幕截图)。当我使用非常小的标记 ',' 时，图例很难阅读(示例代码取自 here )。 (Python 3，Jupyter 实验室) 如何增加图例中标记的大
python - 比例/百分比值
我有这个数据框: o d r kz p 1 3 1 5 NaN 1 3 2 0 NaN 1 10 1 7 NaN 1 10 3 1
r - 在一个图中对不同范围的数据使用多个 scale_colour_gradient 比例
我对 R 很陌生，所以如果我的问题中有不清楚的地方，请耐心等待。我有一个 data.frame “蛋白质”有5列，即； 1.protein_name, 2.protein_FC, 3.protein
javascript - WebGL 比例 Canvas
我有一个带有 webgl 的 Canvas 。我初始化 webgl，创建一个片段和一个顶点着色器、两个覆盖整体的三 Angular 形和一个纹理。 const vertexShaderSource =
opencv - 使用opencv查找对象旋转/比例/位置的方法
我想找到包括旋转，比例和位置的匹配模板。但是cvMatchTemplate没有提供这些详细信息，它仅检测位置。我看过使用棋盘的例子。但是我想用自定义图像实现相同的示例。感谢帮助。问候最佳答案
ios - 如何更改 View 比例
我正在尝试制作像欧洲体育应用程序中那样的侧边栏菜单!当菜单从左侧滑动时，sourceviewcontroller 向左滑动并变小。 var percentWidthOfContainer = cont
javascript - 动态设置元视口(viewport)比例
https://stackblitz.com/edit/js-meta-viewport 在 Chrome 调试器中，当我点击“可以缩放”但无法在移动设备 (Nexus 5 (Chrome 70))
android - 如何在不同设备上保持原始图像的 View 比例？
针对一台设备进行优化后， ImageView 会按照布局中定义的正确比例显示。然而，如何才能更进一步，使各种 ImageView 在不同设备上缩放？ android:layout_width="fil
ios - 比例 View 约束
我正在尝试创建一个具有两个 View 的 View Controller ，其中一个实际上是自定义 TableView ，如下所示: 是否可以添加某种比例约束，以便在所有设备和所有方向上，上 View
android - 如何以编程方式更改 WebView 比例？
我正在使用 PhoneGap 为 Android 开发。下面你可以看到我的代码，我不能做的是在用户更改比例后将 WebView 比例重置为 1。 The reset code should be im
html - CSS - 任何大小图像的相对大小(比例)
我有一个涉及大量图像的元素。问题是每个图像都有不同的分辨率(高度/宽度)。它从 200x600 之类的小图像变成了 3000x5000 大声笑。我正在尝试找到一种方法将所有图像的大小减小到 (MA
javascript - 在运行时更改视口(viewport)比例？
我想在运行时设置视口(viewport)比例 - 移动浏览器是否应该在设置后立即应用更改？这就是我正在尝试的: var scale = 2.0; var viewport = document.get
javascript - PaperJS 增长矩形(比例)
我在 paperjs 中有一个圆形和一个矩形对象。现在我想制作动画。在该动画中，圆圈上升并且矩形必须在圆圈之后(在圆圈底部)增长。我在这里有一个例子(不是我想要的那样工作) example 代码: v
html - 如何使图像适合视口(viewport)比例
对不起，我不能给标题带来完美的含义。您可以在 http://dainielhhong.com/page1.html 测试代码无论屏幕大小如何，我都想使 crack 和 box fit。它适合我的显
javascript - 基于窗口大小的 D3 比例
我是 D3 v3 的新手，正在学习一些有关基本线性和序数尺度的教程。我正在修改教程中的一段代码。我想让颜色根据窗口的大小显示和缩放。如果有更多数据，那么它应该再次均匀分布以容纳所有数据。 var da

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在给定比例下初始化缩放？