Javascript 使用graphviz和d3生成饼图DAG时获取百分比
在编写点文件时，我将节点形状设置为圆形，并填充两种颜色以生成饼图DAG。问题是我想使用工具提示来显示数据百分比。有没有一个简单的方法来实现这一点？谢谢你的帮助 这是我的密码：Javascript 使用graphviz和d3生成饼图DAG时获取百分比,javascript,html,d3.js,svg,graphviz,Javascript,Html,D3.js,Svg,Graphviz,在编写点文件时，我将节点形状设置为圆形，并填充两种颜色以生成饼图DAG。问题是我想使用工具提示来显示数据百分比。有没有一个简单的方法来实现这一点？谢谢你的帮助 这是我的密码： <!DOCTYPE html> <meta charset="utf-8"> <body> <script src="//d3js.org/d3.v4.min.js"></script> <script src="http://viz-js.com/bow
<!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>
var指数=0；
var svgContainer=d3.select（“#graph”）.append（“svg”）.attr（“id”、“dag”）
.attr（“宽度”，300）
.attr（“高度”，900）；
var pieDagContainer=svgContainer.append（“g”）.attr（“id”，“pieDagContainer”）；
var graphviz=pieDagContainer.graphviz（）；
函数render（）{
var点线=点[dotIndex]；
var dot=dotLines.join（“”）；
var transition1=d3.transition（）
.ease（d3.easeLinear）
.持续时间（500）
.transition（）
.持续时间（1500）；
格拉夫维兹
.点（点）
.过渡（过渡1）
.render（）；
}
变量点=[
[
有向图“{”，
'子图clusterstage_0{'，
“label=“Stage 0”，
'节点[shape=circle，style=“wedged”]，
'a0[fillcolor=“黄色；0.8:橙色”]，
“a1[fillcolor=“黄色；0.8:橙色”]”，
“a2[fillcolor=“黄色；0.5:橙色”]”，
“a3[fillcolor=“黄色；0.2:橙色”]”，
'a0->a1->a2->a3'，
'}',
'}'
],
];
render（）；
var指数=0；
var svgContainer=d3.select（“#graph”）.append（“svg”）.attr（“id”、“dag”）
.attr（“宽度”，300）
.attr（“高度”，900）；
var pieDagContainer=svgContainer.append（“g”）.attr（“id”，“pieDagContainer”）；
var graphviz=pieDagContainer.graphviz（）；
函数render（）{
var点线=点[dotIndex]；
var dot=dotLines.join（“”）；
var transition1=d3.transition（）
.ease（d3.easeLinear）
.持续时间（500）
.transition（）
.持续时间（1500）；
格拉夫维兹
.点（点）
.过渡（过渡1）
.render（）；
}
变量点=[
[
有向图“{”，
'子图clusterstage_0{'，
“label=“Stage 0”，
'节点[shape=circle，style=“wedged”]，
'a0[fillcolor=“黄色；0.8:橙色”工具提示=“80%”，
“a1[fillcolor=“黄色；0.8:橙色”工具提示=“80%”，
“a2[fillcolor=“黄色；0.5:橙色”工具提示=“50%”，
“a3[fillcolor=“黄色；0.2:橙色”工具提示=“20%”，
'a0->a1->a2->a3'，
'}',
'}'
],
];
render（）；
var指数=0；
var svgContainer=d3.select（“#graph”）.append（“svg”）.attr（“id”、“dag”）
.attr（“宽度”，300）
.attr（“高度”，900）；
var pieDagContainer=svgContainer.append（“g”）.attr（“id”，“pieDagContainer”）；
var graphviz=pieDagContainer.graphviz（）；
函数render（）{
var点线=点[dotIndex]；
var dot=dotLines.join（“”）；
var transition1=d3.transition（）
.ease（d3.easeLinear）
.持续时间（500）
.transition（）
.持续时间（1500）；
格拉夫维兹
.点（点）
.过渡（过渡1）
.render（）；
}
变量点=[
[
有向图“{”，
'子图clusterstage_0{'，
“label=“Stage 0”，
'节点[shape=circle，style=“wedged”]，
'a0[fillcolor=“黄色；0.8:橙色”工具提示=“80%”，
“a1[fillcolor=“黄色；0.8:橙色”工具提示=“80%”，
“a2[fillcolor=“黄色；0.5:橙色”工具提示=“50%”，
“a3[fillcolor=“黄色；0.2:橙色”工具提示=“20%”，
'a0->a1->a2->a3'，
'}',
'}'
],
];
render（）；