在编写点文件时，我将节点形状设置为圆形并填充两种颜色以生成饼图 DAG。问题是我想使用工具提示来显示数据百分比。有没有一种简单的方法可以实现这一目标？感谢您的帮助。
这是我的代码:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="http://viz-js.com/bower_components/viz.js/viz-lite.js"></script>
<script src="https://github.com/magjac/d3-graphviz/releases/download/v0.0.4/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
var dotIndex = 0;
var svgContainer = d3.select("#graph").append("svg").attr("id","dag")
.attr("width", 300)
.attr("height", 900);
var pieDagContainer = svgContainer.append("g").attr("id","pieDagContainer");
var graphviz = pieDagContainer.graphviz();
function render() {
var dotLines = dots[dotIndex];
var dot = dotLines.join('');
var transition1 = d3.transition()
.ease(d3.easeLinear)
.duration(500)
.transition()
.duration(1500);
graphviz
.dot(dot)
.transition(transition1)
.render();
}
var dots = [
[
'digraph ""{',
'subgraph clusterstage_0 {',
' label="Stage 0"',
' node [shape=circle, style="wedged"]',
' a0 [fillcolor="yellow;0.8:orange"]',
' a1 [fillcolor="yellow;0.8:orange"]',
' a2 [fillcolor="yellow;0.5:orange"]',
' a3 [fillcolor="yellow;0.2:orange"]',
' a0->a1->a2->a3',
'}',
'}'
],
];
render();
</script>
最佳答案
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="http://viz-js.com/bower_components/viz.js/viz-lite.js"></script>
<script src="https://github.com/magjac/d3-graphviz/releases/download/v0.0.4/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
var dotIndex = 0;
var svgContainer = d3.select("#graph").append("svg").attr("id","dag")
.attr("width", 300)
.attr("height", 900);
var pieDagContainer = svgContainer.append("g").attr("id","pieDagContainer");
var graphviz = pieDagContainer.graphviz();
function render() {
var dotLines = dots[dotIndex];
var dot = dotLines.join('');
var transition1 = d3.transition()
.ease(d3.easeLinear)
.duration(500)
.transition()
.duration(1500);
graphviz
.dot(dot)
.transition(transition1)
.render();
}
var dots = [
[
'digraph ""{',
'subgraph clusterstage_0 {',
' label="Stage 0"',
' node [shape=circle, style="wedged"]',
' a0 [fillcolor="yellow;0.8:orange" tooltip="80%"]',
' a1 [fillcolor="yellow;0.8:orange" tooltip="80%"]',
' a2 [fillcolor="yellow;0.5:orange" tooltip="50%"]',
' a3 [fillcolor="yellow;0.2:orange" tooltip="20%"]',
' a0->a1->a2->a3',
'}',
'}'
],
];
render();
</script>关于javascript - 使用graphviz和d3生成饼图DAG时获取百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45929232/