我正在学习D3并创建了我的第一个基本条形图。我正在尝试向图表上的每个条形添加一个简单的工具提示。在鼠标悬停时，我想要一个小的工具提示出现在我可以显示数据值或名称的地方。
我尝试按照d3-tip的API文档进行操作，但似乎无法使其正常运行。我的JSFiddle可用here。
我的JavaScript代码如下：
var data = [{
"id": "EEC6B010-F6E9-48B4-87F3-F24B2D71457C",
"nameAbbreviated": "Verité",
"value": "121"
}, {
"id": "DCCC0381-0B18-408D-B4B5-797736C01EE6",
"nameAbbreviated": "Lavalas",
"value": "109"
}, {
"id": "06C02B09-2829-489E-AEE8-4B4705EF815A",
"nameAbbreviated": "Fusion",
"value": "104"
}, {
"id": "B85A5B7A-6B3E-44BC-B933-CFC7C4F21B71",
"nameAbbreviated": "Renmen Ayiti",
"value": "101"
}, {
"id": "E5B984D8-C334-42B6-8A6E-0A4847C3E0EB",
"nameAbbreviated": "OPL",
"value": "101"
}, {
"id": "4E8B7CE7-4DAC-4678-82DD-E5CEBD98F927",
"nameAbbreviated": "Pitit Dessalines",
"value": "95"
}, {
"id": "D011724F-246B-4B8F-84B0-15C9BA5AA25F",
"nameAbbreviated": "KID",
"value": "91"
}, {
"id": "5D3370AD-715D-4124-99AC-F084CB77DA7F",
"nameAbbreviated": "Bouclier",
"value": "60"
}, {
"id": "B083B402-AAFC-4F3E-9926-3A828401FE2B",
"nameAbbreviated": "Pou Nou Tout",
"value": "58"
}, {
"id": "97DFDDDC-DF7C-41D8-B41E-513ED2129497",
"nameAbbreviated": "LAPEH",
"value": "55"
}, {
"id": "ABD3EFC7-5937-4591-B511-C024396F2F4F",
"nameAbbreviated": "Respè",
"value": "47"
}, {
"id": "6297E405-C6AA-4EF3-8B4C-A4CFD4C7407A",
"nameAbbreviated": "Inite",
"value": "47"
}, {
"id": "41DC3C63-F423-4941-ACF7-63118BD9CE19",
"nameAbbreviated": "AAA",
"value": "40"
}, {
"id": "442F6E92-33D7-4D9D-988A-DDCE8F9B5C9E",
"nameAbbreviated": "APLA",
"value": "40"
}, {
"id": "1E08C86E-D1F5-4FC4-A57C-DB03D9A6CF35",
"nameAbbreviated": "Consortium",
"value": "39"
}, {
"id": "33F4766F-E324-43F4-9C80-7B7640465920",
"nameAbbreviated": "Defile",
"value": "37"
}, {
"id": "CB847E83-9915-4030-8AC2-F71262B7E220",
"nameAbbreviated": "Kontra Pèp La",
"value": "36"
}, {
"id": "6053FF19-079A-49E4-8061-EE569785A3F8",
"nameAbbreviated": "Platforme G-18",
"value": "35"
}, {
"id": "DB9A10B4-84CA-4CFC-800F-A11DE6AC4374",
"nameAbbreviated": "MOPOD",
"value": "32"
}, {
"id": "A1B43B9D-9CFA-4639-9E7E-131C9F689494",
"nameAbbreviated": "Pati Politik Peyizan",
"value": "27"
}, {
"id": "2A23F53D-E962-40D5-BBE2-085A66C09308",
"nameAbbreviated": "UNCRH",
"value": "26"
}, {
"id": "B420D6A6-373C-40EA-BE94-665C204122B5",
"nameAbbreviated": "Platforme Rapwoche",
"value": "25"
}, {
"id": "ADAFB108-A99F-4953-894B-6196CA3DFACC",
"nameAbbreviated": "MOCHRENAH",
"value": "22"
}, {
"id": "28DE8FC3-B7FE-469B-B558-A36149DB73E6",
"nameAbbreviated": "MAS",
"value": "22"
}, {
"id": "16CF179C-BB79-49C3-84E1-115E999327AF",
"nameAbbreviated": "Konsyans Patriyotik",
"value": "21"
}, {
"id": "70114580-5D2C-4F04-8FAB-E37E8C50C637",
"nameAbbreviated": "Plateforme ENTREH",
"value": "20"
}, {
"id": "489462AB-A126-40DE-94D7-03D75BF7B47E",
"nameAbbreviated": "RANDEVOUS",
"value": "20"
}, {
"id": "910FE85B-2CDA-41AC-993C-383FB6D05913",
"nameAbbreviated": "Parti Republicain Haitien",
"value": "19"
}, {
"id": "DF79A277-70D7-4F15-ACB9-3ABD7BB3C24E",
"nameAbbreviated": "Force Unite Nationale",
"value": "18"
}, {
"id": "45017676-7C06-422A-999B-A8CFDB41AA5C",
"nameAbbreviated": "Canaan",
"value": "18"
}, {
"id": "4EDDBB42-EDAA-426F-AFB3-267D4BA6DC40",
"nameAbbreviated": "UNIR",
"value": "17"
}, {
"id": "89296754-7B48-4F27-B421-C03E3044FC4C",
"nameAbbreviated": "Mouvement National Haïtien",
"value": "15"
}, {
"id": "1C222C12-59F2-4D6B-BB29-7EADA31FAE99",
"nameAbbreviated": "MOPAM",
"value": "14"
}, {
"id": "00D9F00D-94F3-421B-A682-5E89925BC287",
"nameAbbreviated": "ADRENA",
"value": "14"
}, {
"id": "27EF3100-F566-446A-91F6-02D924F3A7A6",
"nameAbbreviated": "Platefom Leve Kanpe",
"value": "13"
}, {
"id": "39C7E1DA-A3FC-4819-B154-137E5510C76C",
"nameAbbreviated": "UPAN",
"value": "12"
}, {
"id": "30F85639-C56F-445F-A2AB-5CED0CA7FE17",
"nameAbbreviated": "ATERI",
"value": "12"
}, {
"id": "E49120FE-BE37-4434-BCCC-68A69627DF7B",
"nameAbbreviated": "Plateforme Justice",
"value": "12"
}, {
"id": "3940FA89-1A85-463C-9E05-9574824671E2",
"nameAbbreviated": "Retabli Ayiti",
"value": "11"
}, {
"id": "5710C5C6-7067-4D09-86CD-108B7D6364E0",
"nameAbbreviated": "UNDH",
"value": "11"
}, {
"id": "CF4164AC-D542-4DDF-9449-2D33D9231E32",
"nameAbbreviated": "Concorde National",
"value": "11"
}, {
"id": "A3DC706B-63BF-4FE2-A55F-3244528E3CC9",
"nameAbbreviated": "MUDHAH",
"value": "11"
}, {
"id": "664FD3B9-0B90-4BE7-A3EB-B454195A4690",
"nameAbbreviated": "Nouvelle Haiti",
"value": "10"
}, {
"id": "512E9498-DB7D-466D-AEED-A9AABC6D010A",
"nameAbbreviated": "Plateforme Politique Palmis",
"value": "10"
}, {
"id": "4617856F-95EC-4C3C-A7A4-34185B9FAD83",
"nameAbbreviated": "FURH",
"value": "10"
}, {
"id": "BB7FA024-A799-4847-AB14-6E9ED1C0D038",
"nameAbbreviated": "Mouvement National des Citoyens",
"value": "10"
}, {
"id": "9269481B-AE50-4B0D-83F0-5B78C96291B1",
"nameAbbreviated": "Konfyans",
"value": "9"
}, {
"id": "280B3009-15C1-44AD-8D2A-14E5ECB9F512",
"nameAbbreviated": "Repare-N",
"value": "8"
}, {
"id": "88241E40-1D94-484A-9452-D58A696159AD",
"nameAbbreviated": "Mouvman Revolisyonè Ayisyen",
"value": "8"
}, {
"id": "521EBA26-7422-4A2D-96DB-BBA540AFFDB5",
"nameAbbreviated": "Repons Klas Mwayenn Nan",
"value": "8"
}, {
"id": "FBDB121D-1AC4-42FC-8041-D803161AA32D",
"nameAbbreviated": "Plateforme CONAPPH",
"value": "7"
}, {
"id": "760CE2F8-B414-4B4B-BC16-13AA4E4CC2EA",
"nameAbbreviated": "Konbit Nasyonal",
"value": "7"
}, {
"id": "4C49F1AC-E8FF-46B5-9EEB-EE38480AE016",
"nameAbbreviated": "Pati Kreyòl Nou Ye",
"value": "7"
}, {
"id": "F182EA5E-09F4-4C43-9EAC-26E0E81F129C",
"nameAbbreviated": "KLE",
"value": "7"
}, {
"id": "5B34F19E-B249-45AB-A491-6BFDA870881D",
"nameAbbreviated": "MOSANO",
"value": "7"
}, {
"id": "2226FAEF-A745-4B41-82ED-8F712FE9DFC0",
"nameAbbreviated": "Veye Yo",
"value": "7"
}, {
"id": "D370826F-F693-4F7F-B177-3455BB98FE5B",
"nameAbbreviated": "ADEBHA",
"value": "6"
}, {
"id": "8288DEBC-207A-4E32-8210-5276CD18D6B7",
"nameAbbreviated": "DELIVRANS",
"value": "6"
}, {
"id": "6FB50EEF-A9E6-4DBC-9694-18D3FED7E20B",
"nameAbbreviated": "AKAO",
"value": "6"
}, {
"id": "0D73BCDA-255F-4FDD-80CB-EBB5C4B3D082",
"nameAbbreviated": "Force Democratique Haitien Integre",
"value": "6"
}, {
"id": "689531F0-7618-4347-ADDB-DDD3E0BDC508",
"nameAbbreviated": "Plan d'Action Citoyenne",
"value": "6"
}, {
"id": "240C0F3D-35FF-4190-8202-200866271481",
"nameAbbreviated": "Bloc 20",
"value": "6"
}, {
"id": "543E03D0-63FE-4025-B30E-19BF4E315741",
"nameAbbreviated": "Tèt Ansanm",
"value": "5"
}, {
"id": "04D484F1-E2FC-4763-BB0D-6B0020F4E2B1",
"nameAbbreviated": "Meksepa",
"value": "5"
}, {
"id": "DDAA4520-38B3-4B4D-B666-A4D2199BCBE7",
"nameAbbreviated": "LIDE",
"value": "5"
}, {
"id": "BA4E2F7E-CAC9-4E65-ABC6-C7AC233B3BCE",
"nameAbbreviated": "Plateforme Solution",
"value": "5"
}, {
"id": "B6FC178C-E2D8-4093-A1BA-2EFAE4101D16",
"nameAbbreviated": "MIDH",
"value": "4"
}, {
"id": "0CCF65BE-8043-489C-B518-3DBC69AE5606",
"nameAbbreviated": "Parti Populaire Nationale",
"value": "4"
}, {
"id": "1F819A1F-8093-4500-95B1-AC12CDBFB5AE",
"nameAbbreviated": "Mouvement d'Union Republicaine",
"value": "4"
}, {
"id": "1196853E-773B-4878-A0CF-C0EF2C4584B9",
"nameAbbreviated": "Parti pour l'Evolution Nationale Haitienne",
"value": "4"
}, {
"id": "1AFB0153-B4D3-43DC-AC82-B3FB26F358A3",
"nameAbbreviated": "Parti Nationaliste Chretien d'Haïti",
"value": "4"
}, {
"id": "92DC5AD2-35F4-4F96-AD62-D1AA77E70738",
"nameAbbreviated": "Parti Socialiste Unifie Haitien",
"value": "4"
}, {
"id": "636BE17E-8112-4A08-AA43-4B9B3CFF9EBF",
"nameAbbreviated": "Mobilisation pour le Progres d'Haïti",
"value": "4"
}, {
"id": "D6CAA5FA-D3D2-4147-925D-E92CFD11550C",
"nameAbbreviated": "Front Civico-Politique Haitien",
"value": "4"
}, {
"id": "32D76BB9-1190-45FE-9521-8CBEE089F1AD",
"nameAbbreviated": "Plateforme Patrayil",
"value": "4"
}, {
"id": "6112AA33-5884-4166-BF0C-1E598036AFD9",
"nameAbbreviated": "Konbit Pou Ayiti",
"value": "3"
}, {
"id": "1A56B784-AD24-404C-9186-2EE394777852",
"nameAbbreviated": "MOPANOU",
"value": "3"
}, {
"id": "BEBDFE57-86AF-4F46-AC87-1661FC248A66",
"nameAbbreviated": "Parti Federaliste",
"value": "3"
}, {
"id": "5EA31344-5738-448B-99DB-7B05229DFAC6",
"nameAbbreviated": "Entre Nou",
"value": "3"
}, {
"id": "25460C1A-8F0E-4BE3-AB13-DD9A356BAB44",
"nameAbbreviated": "Parti Democrate Chretien Haitien",
"value": "3"
}, {
"id": "3677FC31-E66F-4629-901F-1593EF16FC54",
"nameAbbreviated": "GREH",
"value": "3"
}, {
"id": "7D0E6147-0498-4E80-84D7-B349388B4CCB",
"nameAbbreviated": "Olahh Baton Jenes La",
"value": "2"
}, {
"id": "38D5EF78-AAF1-443A-8863-19E5D5BD95EE",
"nameAbbreviated": "OLAHH",
"value": "2"
}, {
"id": "E677B6CF-A9C3-4420-8BDF-5311B4B0B65D",
"nameAbbreviated": "Bourad",
"value": "2"
}, {
"id": "C2DA502A-9863-44BB-A8C4-43372AC070DD",
"nameAbbreviated": "PANAJUTO",
"value": "2"
}, {
"id": "C81FB641-4CE0-4545-A9CD-1DBF880721E5",
"nameAbbreviated": "Rassemblement des Citoyens Patriotes",
"value": "2"
}, {
"id": "4150011D-6EC7-4307-8514-C0DFA8F1572D",
"nameAbbreviated": "RESULTAT",
"value": "2"
}, {
"id": "D38758EC-894D-44F2-870B-28CDCABFE327",
"nameAbbreviated": "Konbit Sitwayen",
"value": "2"
}, {
"id": "7F41BC71-5805-46F2-91AD-1EEDDE1ADA00",
"nameAbbreviated": "Parti Democrate Institutionnaliste",
"value": "2"
}, {
"id": "ED8ADA18-51CE-4974-B56D-41E95B061E40",
"nameAbbreviated": "KONVIKSYON",
"value": "2"
}, {
"id": "83BABF49-5E1C-41B9-BD1E-4A0248443867",
"nameAbbreviated": "Parti Nationaliste Haitien",
"value": "1"
}, {
"id": "83332D3D-80DB-4ED4-90C8-BF57BAF6AF9A",
"nameAbbreviated": "Reconstruire Haiti",
"value": "1"
}, {
"id": "AD84CEE7-570D-4455-8E44-9AFFA075DF0D",
"nameAbbreviated": "Correch",
"value": "1"
}, {
"id": "0C2EE549-9253-4E22-9A2B-3E2F49B6A666",
"nameAbbreviated": "Rassemblement des Patriotes Haitiens",
"value": "1"
}, {
"id": "FD893797-3586-426D-89FD-9E0C4D060657",
"nameAbbreviated": "ASO",
"value": "1"
}, {
"id": "3C1590EF-2A0A-48DA-BF81-BAF5368B220F",
"nameAbbreviated": "Parti Reformiste National",
"value": "1"
}, {
"id": "09F84315-B324-48DD-9C9B-78471182F1E1",
"nameAbbreviated": "Parti Agricole Haitien",
"value": "1"
}];
var x = d3.scale.linear()
.domain([0, d3.max(data, function (d) {
return d.value
})])
.range([0, 420]);
var tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) { return d; })
var vis = d3.select(document.body)
.append('svg')
vis = d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function (d) {
return x(d.value) + "px";
})
.text(function (d) {
return d.value;
})
// REQUIRED: Call the tooltip on the context of the visualization
.call(tip)
vis = vis.append('rect')
.attr('width', 100)
.attr('height', 100)
// Show and hide the tooltip
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
我的CSS代码是：
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
我认为我的问题是工具提示没有正确初始化。在API中它说：
/* Invoke the tip in the context of your visualization */
vis.call(tip)
我不确定我明白这意味着什么。我做错了吗？