我正在寻找一种创建工具提示的方法，该工具提示会根据鼠标悬停的部分更改其值。
例如：当鼠标悬停为“A”时，工具提示显示“1”。当鼠标悬停为“B”时，工具提示显示“2”。
到目前为止，我已经实现了一个附加固定字符串的工具提示。但是这将为所有部分显示相同的字符串。
我使用了以下代码：
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src = "http://d3js.org/d3.v3.min.js"></script>
</head>
<style>
body {
font: 14px sans - serif;
}
.chord path {
fill - opacity: .70;
stroke: #000;
stroke-width: .3px;
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 12px;
padding: 8px;
font: 10px sans-serif;
background: #ddd;
border: solid 1px #aaa;
border - radius: 3px;
pointer - events: none;
}
</style>
<body>
<script type="text/javascript">
d3.tsv('Intercompany.csv', function(err, data) {
// Loading Intercompany.csv into matrix
var matrix = [],
companies = d3.keys(data[0]).slice(1);
data.forEach(function(row) {
var mrow = [];
companies.forEach(function(c) {
mrow.push(Number(row[c]));
});
matrix.push(mrow);
});
var chord = d3.layout.chord()
.padding(0.05)
.sortGroups(d3.descending)
.sortSubgroups(d3.descending)
.sortChords(d3.descending)
.matrix(matrix);
var width = 1000,
height = 600,
innerRadius = Math.min(width, height) * 0.35,
outerRadius = innerRadius * 1.06;
var fill = d3.scale.ordinal()
.domain(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"])
.range(["#4D689F", "#81BC00", "#00A1DE", "#72C7E7", "#3C8A2E", "#BDD203", "#DDDDDD", "#BCBCBC", "#9A9A9A", "#575757", "#313131", "#002776"]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
function mouseover() {
div.transition()
.duration(200)
.style("opacity", 1);
}
function mousemove() {
div.style("left", d3.event.pageX+15 + "px")
.style("top", d3.event.pageY-30 + "px")
.style("opacity", 1)
.text("example");
}
function mouseout() {
div.transition()
.duration(200)
.style("opacity", 0);
}
var g = svg.selectAll("g.group")
.data(chord.groups)
.enter().append("svg:g")
.attr("class", "group");
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return fill(d.index);
})
.style("stroke", function(d) {
return fill(d.index);
})
.attr("id", function(d, i) {
return "group-" + d.index
})
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
/* g.append("svg:text")
.attr("x", 6)
.attr("class", "companie")
.attr("dy", 12)
.filter(function(d) { return d.value> 25; })
.append("svg:textPath")
.attr("xlink:href", function(d) { return "#group-" + d.index; })
.text(function(d) { return companies[d.index]; });
*/
var config = {
rotation: 0,
textgap: 35
};
var offset = Math.PI * config.rotation,
width = config.width,
height = config.height,
textgap = config.textgap
colors = config.colors;
g.append("svg:text")
.each(function(d) {
d.angle = ((d.startAngle + d.endAngle) / 2) + offset;
})
.attr("dy", ".50em")
.style("font-weight", "bold")
.style("font-size", "12px")
.attr("text-anchor", function(d) {
return d.angle > Math.PI ? "end" : null;
})
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" + "translate(" + (outerRadius + textgap) + ")" + (d.angle > Math.PI ? "rotate(180)" : "");
})
.text(function(d) {
return companies[d.index];
})
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
function groupTicks(d) {
var k = (d.endAngle - d.startAngle) / d.value;
return d3.range(0, d.value, 10).map(function(v, i) {
return {
angle: v * k + d.startAngle,
label: i % 5 != 0 ? null : v / 10 + "m"
};
});
}
var ticks = g.selectAll("g")
.data(groupTicks)
.enter().append("g")
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" + "translate(" + outerRadius + ",0)";
});
ticks.append("line")
.attr("x1", 1)
.attr("y1", 0)
.attr("x2", 5)
.attr("y2", 0)
.style("stroke", "#000");
ticks.append("text")
.attr("x", 8)
.attr("dy", ".35em")
.style("font-size", "9px")
.attr("transform", function(d) {
// Beschriftung drehen wenn Kreiswinkel> 180°
return d.angle > Math.PI ?
"rotate(180)translate(-16)" : null;
})
.style("text-anchor", function(d) {
return d.angle > Math.PI ? "end" : null;
})
.text(function(d) {
return d.label;
});
function chordColor(d) {
return fill(d.source.value > d.target.value ?
d.source.index : d.target.index);
}
svg.append("g")
.attr("class", "chord")
.selectAll("path")
.data(chord.chords)
.enter().append("path")
.attr("d", d3.svg.chord().radius(innerRadius))
.style("fill", chordColor)
.style("opacity", 1);
function fade(opacity) {
return function(g, i) {
svg.selectAll(".chord path")
.filter(function(d) {
return d.source.index != i &&
d.target.index != i;
})
.transition()
.style("opacity", opacity);
};
}
g.on("mouseover", fade(0.1))
.on("mouseout", fade(1));
});
</script>
答案 0 :(得分：0)
以下作品：
function mousemove(d) {
var output = "";
var company = companies[d.index];
switch (company) {
case "A": output = "1";
break;}
div.style("left", d3.event.pageX+15 + "px")
.style("top", d3.event.pageY-30 + "px")
.style("opacity", 1)
.text(output);
}