javascript - 如何以给定的比例初始化缩放？
问题描述
我在下面有这个代码，它是一个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>唯一的变化在于通过调用transform带有scale转换的操作来设置缩放的初始状态（该translate步骤是为了使布局居中）：
svg.call(zoom_handler)
.call(zoom_handler.transform, d3.zoomIdentity.translate(200, 150).scale(0.2));
在这里，我缩小了 5 ( scale(1/5))。
推荐阅读
- php - Laravel 8惯性将数据传递给AppLayout
- javascript - 在 Javascript 中制作函数的真实副本
- reactjs - 如何让 React Router 识别动态路径上的新路由
- sql - 如何对具有父/子关系的批次的值求和？
- java - 从一个数据源中选择查询并插入不同的数据源 - mybatis
- magento - Magento 2 帐户导航模板的标记在哪里？
- java - 图像未显示在 .jar 文件 Eclipse 上
- html - 对于可访问的自定义下拉菜单，为什么某些键不起作用？
- json - Nifi Jolt 将字符串转换为 json 数组
- json - 如何让 Jackson 类型 id 解析器在一组通用对象上工作？