我正在尝试为我的和弦图中的每个功能区实现一个工具提示，显示有关各国之间的欧洲电视网投票关系的信息：
＆＃34;（国家/地区）从（国家/地区）收到（价值）积分＆＃34;
，如第274行所示，我尝试通过在下面的最后一个函数中编写代码来完成此操作。目前底部屏幕上显示的工具提示显示100美元，但它没有显示我想要的信息。这是我的代码：
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
body {
font: 10px sans-serif;
background-color: #F0F0F0;
}
h1 {
font-size: 400%;
position: fixed;
font-family: Helvetica;
top:500px;
left: 1100px;
}
h3 {
font-family: Helvetica;
position: fixed;
top:570px;
left: 1250px;
}
h4 {
position: absolute;
font-style: italic;
font-family: Helvetica;
top:800px;
left: 1170px;
}
svg {
position: fixed;
}
button {
background-color: #f44336;
position: fixed;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
top: 80px;
left: 10px;
}
.button2 {
background-color: #008CBA;
top:80px;
left: 120px;
} /* Blue */
.button3 {
background-color: #4CA350;
top:80px;
left: 230px;
} /* Red */
.group-tick line {
stroke: #000;
}
.ribbons {
fill-opacity: 1;
}
#tooltip.total {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip {
position: fixed;
font-family: Helvetica Neue;
font-size: 16px;
top:870px;
left:720px;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 40px;
line-height: 20px;
}
</style>
<title>Julia Spyrou DECO3100 Assignment 3</title>
<body>
<h1>Voting at the Eurovision Song Contest</h1>
<h3>Mouseover individual chords to view voting relationships</h3>
<h4>NB: These visualisations exclude the countries that did not make the Final and their votes as well</h4>
<button class="button">2016</button>
<button class="button button2">2017</button>
<button class="button button3">2018</button>
<div id="tooltip" class="hidden">
<p>$<span id="value">100</span></p>
</div>
<svg width="1050" height="1050"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var names = ["Ukraine","Spain","Slovenia","Lithuania","Austria","Estonia","Norway","Portugal","UK","Serbia","Germany","Albania","France","Czech Republic","Denmark","Australia","Finland","Bulgaria","Moldova","Sweden","Hungary","Israel","Netherlands","Ireland","Cyprus","Italy"];
var opacityDefault = 0.7;
var matrix = [
[0.1,0,0,0,0,0,0,4,0,0,0,0,4,12,0,0,0,1,15,0,0,7,0,0,2,8], //Ukraine
[0,0,0,0,0,0,2,14,1,0,6,0,5,0,6,7,0,0,0,0,0,0,0,1,7,0], //Spain
[5,0,0,0,0,0,0,3,0,8,0,0,2,7,0,0,0,0,0,0,0,4,1,0,0,0], //Slovenia
[2,0,0,0,0,22,15,6,12,0,8,0,0,1,0,3,0,10,0,7,5,0,7,12,6,0], //Lithuania
[7,8,12,15,0,18,16,8,12,4,15,2,7,5,18,5,10,16,3,12,11,13,13,5,2,7], //Austria
[4,3,5,12,2,0,0,19,6,3,2,4,7,5,7,8,12,2,13,0,0,8,4,7,5,10], //Estonia
[0,3,5,0,0,6,0,0,5,9,0,0,0,0,8,1,0,0,7,10,7,0,4,0,5,12], //Norway
[0,0,0,7,0,3,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,2,6,0,0], //Portugal
[0,0,0,0,0,0,0,0,0,0,1,3,3,0,3,6,0,0,0,0,0,8,0,10,0,6], //UK
[0,0,0,0,8,0,0,0,0,0,0,3,1,0,0,0,0,7,0,0,0,0,0,0,0,1], //Serbia
[0,13,4,7,16,6,18,8,3,10,0,14,8,3,24,12,1,6,8,6,1,8,24,16,3,13], //Germany
[0,0,5,0,9,0,0,10,7,1,0,0,0,6,0,0,0,7,0,0,10,0,0,2,6,12], //Albania
[19,10,2,15,0,0,8,5,0,0,0,12,0,0,2,0,9,5,0,5,0,6,0,4,4,0], //France
[14,14,11,8,15,5,4,0,5,5,8,1,4,0,6,4,5,11,6,3,8,12,6,7,13,0], //Czech Republic
[11,0,7,10,5,8,10,2,2,4,3,0,2,7,0,10,13,0,0,12,24,0,8,2,0,12], //Denmark
[2,0,0,0,0,0,6,0,1,0,7,0,10,0,12,0,0,0,7,8,7,7,0,0,0,0], //Australia
[0,0,0,0,0,12,0,0,4,0,0,0,0,3,0,4,0,0,0,9,0,6,0,0,0,0], //Finland
[0,5,0,0,6,7,0,7,14,2,0,14,0,5,1,0,10,0,11,6,0,1,0,10,12,0], //Bulgaria
[6,0,6,0,0,1,0,6,4,6,0,2,6,6,0,7,0,8,0,0,2,10,0,1,10,10], //Moldova
[6,2,12,12,8,5,13,0,2,12,12,4,5,8,11,12,8,2,0,0,1,10,8,0,12,1], //Sweden
[1,0,3,2,3,3,0,0,0,12,2,0,0,2,0,0,8,5,2,0,0,3,2,0,4,0], //Hungary
[22,22,1,7,19,0,7,2,17,9,11,6,24,22,3,18,19,14,22,17,16,0,15,13,10,9], //Israel
[8,0,7,3,1,1,9,0,0,7,5,0,6,0,5,0,2,0,0,1,8,0,0,3,0,0], //Netherlands
[0,6,0,4,8,0,1,3,13,0,15,7,1,14,4,12,2,1,0,4,3,0,4,0,0,5], //Ireland
[4,20,14,7,1,12,7,5,8,10,9,20,3,8,6,7,7,15,13,16,7,2,11,17,0,8], //Cyprus
[5,10,10,7,10,7,0,14,0,14,12,24,10,2,0,0,10,6,8,0,6,5,7,0,15,0], //Italy
];
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
outerRadius = Math.min(width, height) * 0.4 - 100,
innerRadius = outerRadius - 20;
var formatValue = d3.formatPrefix(",.0", 1e3);
var chord = d3.chord()
.padAngle(0.05)
.sortSubgroups(d3.descending);
var arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var ribbon = d3.ribbon()
.radius(innerRadius);
var color = d3.scaleOrdinal()
.domain(d3.range(4))
.range(["#4B5320", "#50C878", "#98FB98", "#679267","#2E8B57","#043927", "#0B6623","#9DC183","#708238", "#C7EA46", "#3F704D","#00A86B","8F9779"]);
var g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.datum(chord(matrix));
// Append the groups:
var group = g.append("g")
.attr("class", "groups")
.selectAll("g")
.data(function(chords) { return chords.groups; })
.enter().append("g");
group.append("path")
.style("fill", function(d) { return color(d.index); })
.style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
.attr("d", arc)
.on("mouseover", highlightRibbons)
.on("mouseout", showAllRibbons)
group.append("text")
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.attr("class", "titles")
.attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.attr("transform", function(d) {
if (outerArcs = 0) {
width = 10;
}
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + (outerRadius + 10) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : "");
})
.text(function(d,i) { return names[i]; });
// Append the ribbons
var ribbons = g.append("g") // save the selection as a variable
.attr("class", "ribbons")
.selectAll("path")
.data(function(chords) { return chords; })
.enter().append("path")
.attr("d", ribbon)
.style("fill", function(d) { return color(d.target.index); })
.attr("class","ribbon")
.style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); })
.on("mouseover", highlightOneRibbon)
.on("mouseout",showAllRibbons);
// Highlight
function highlightRibbons(d,i) {
ribbons.filter(function(r) {
if(!(r.target.index == i || r.source.index == i)) return r;
})
.transition()
.style("opacity",0.1)
.duration(500);
ribbons.filter(function(r) {
if(r.target.index == i || r.source.index == i) return r;
})
.transition()
.style("opacity",1)
.duration(500);
}
// Unhighlight
function showAllRibbons() {
ribbons
//.transition() // don't use for individual ribbons - transition is too long
.style("opacity",1)
//.duration(500); // any visually effective transition will be too long given how quickly the mouse can cross multiple paths
}
// show a particular ribbon:
function highlightOneRibbon() {
ribbons.style("opacity",0.1);
d3.select(this).style("opacity", 1);
d3.select("#tooltip")
.style("left", xPosition + "100px")
.style("top", yPosition + "3000px")
.text(names[d.source.index] + " received " + d.source.value + " points from " + names[d.target.index]);
}
d3.select("#tooltip").classed("hidden", false);
</script>
如果有人能解决这个问题，那将是超级的！这可能看起来像是一个可以纠正的基本问题，但我以前从未使用过D3而且我在这里问了这么多问题而道歉。不幸的是，我的时间和睡眠都很低，并且花了好几个小时试图解决这个问题。干杯！