mirror of https://github.com/apache/superset.git
add tooltips to sankey (#341)
* add tooltips to sankey * update tooltip language ('count' --> 'value', 'Link Weight' --> 'Path Value').
This commit is contained in:
parent
77828b630a
commit
1e08b3e8c5
|
@ -2,7 +2,11 @@ body {
|
|||
margin: 0px !important;
|
||||
}
|
||||
|
||||
.alert.alert-danger>.debugger {
|
||||
.emph {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.alert.alert-danger > .debugger {
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
|
|
@ -18,3 +18,16 @@
|
|||
.sankey .link:hover {
|
||||
stroke-opacity: .5;
|
||||
}
|
||||
|
||||
.sankey-tooltip {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
background: #ddd;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 200;
|
||||
color: #333;
|
||||
border: 1px solid #fff;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
@ -18,7 +18,7 @@ function sankeyVis(slice) {
|
|||
var width = slice.width() - margin.left - margin.right;
|
||||
var height = slice.height() - margin.top - margin.bottom;
|
||||
|
||||
var formatNumber = d3.format(",.0f");
|
||||
var formatNumber = d3.format(",.2f");
|
||||
|
||||
div.selectAll("*").remove();
|
||||
var svg = div.append("svg")
|
||||
|
@ -27,6 +27,10 @@ function sankeyVis(slice) {
|
|||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
var tooltip = div.append("div")
|
||||
.attr("class", "sankey-tooltip")
|
||||
.style("opacity", 0);
|
||||
|
||||
var sankey = d3.sankey()
|
||||
.nodeWidth(15)
|
||||
.nodePadding(10)
|
||||
|
@ -56,7 +60,7 @@ function sankeyVis(slice) {
|
|||
|
||||
var link = svg.append("g").selectAll(".link")
|
||||
.data(links)
|
||||
.enter().append("path")
|
||||
.enter().append("path")
|
||||
.attr("class", "link")
|
||||
.attr("d", path)
|
||||
.style("stroke-width", function (d) {
|
||||
|
@ -64,16 +68,13 @@ function sankeyVis(slice) {
|
|||
})
|
||||
.sort(function (a, b) {
|
||||
return b.dy - a.dy;
|
||||
});
|
||||
|
||||
link.append("title")
|
||||
.text(function (d) {
|
||||
return d.source.name + " → " + d.target.name + "\n" + formatNumber(d.value);
|
||||
});
|
||||
})
|
||||
.on("mouseover", onmouseover)
|
||||
.on("mouseout", onmouseout);
|
||||
|
||||
var node = svg.append("g").selectAll(".node")
|
||||
.data(nodes)
|
||||
.enter().append("g")
|
||||
.enter().append("g")
|
||||
.attr("class", "node")
|
||||
.attr("transform", function (d) {
|
||||
return "translate(" + d.x + "," + d.y + ")";
|
||||
|
@ -99,10 +100,8 @@ function sankeyVis(slice) {
|
|||
.style("stroke", function (d) {
|
||||
return d3.rgb(d.color).darker(2);
|
||||
})
|
||||
.append("title")
|
||||
.text(function (d) {
|
||||
return d.name + "\n" + formatNumber(d.value);
|
||||
});
|
||||
.on("mouseover", onmouseover)
|
||||
.on("mouseout", onmouseout);
|
||||
|
||||
node.append("text")
|
||||
.attr("x", -6)
|
||||
|
@ -122,10 +121,50 @@ function sankeyVis(slice) {
|
|||
.attr("text-anchor", "start");
|
||||
|
||||
function dragmove(d) {
|
||||
d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
|
||||
d3.select(this)
|
||||
.attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
|
||||
|
||||
sankey.relayout();
|
||||
link.attr("d", path);
|
||||
}
|
||||
|
||||
function getTooltipHtml(d) {
|
||||
var html;
|
||||
|
||||
if (d.sourceLinks) { // is node
|
||||
html = d.name + " Value: <span class='emph'>" + formatNumber(d.value) + "</span>";
|
||||
} else {
|
||||
var val = formatNumber(d.value);
|
||||
var sourcePercent = d3.round((d.value / d.source.value) * 100, 1);
|
||||
var targetPercent = d3.round((d.value / d.target.value) * 100, 1);
|
||||
|
||||
html = [
|
||||
"<div class=''>Path Value: <span class='emph'>", val, "</span></div>",
|
||||
"<div class='percents'>",
|
||||
"<span class='emph'>", (isFinite(sourcePercent) ? sourcePercent : "100"), "%</span> of ", d.source.name, "<br/>",
|
||||
"<span class='emph'>" + (isFinite(targetPercent) ? targetPercent : "--") + "%</span> of ", d.target.name, "target",
|
||||
"</div>"
|
||||
].join("");
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
function onmouseover(d) {
|
||||
tooltip
|
||||
.html(function () { return getTooltipHtml(d); })
|
||||
.transition()
|
||||
.duration(200)
|
||||
.style("left", (d3.event.layerX + 10) + "px")
|
||||
.style("top", (d3.event.layerY + 10) + "px")
|
||||
.style("opacity", 0.95);
|
||||
}
|
||||
|
||||
function onmouseout(d) {
|
||||
tooltip.transition()
|
||||
.duration(100)
|
||||
.style("opacity", 0);
|
||||
}
|
||||
|
||||
slice.done(json);
|
||||
});
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue