使用graphviz和d3生成饼图时获得百分比DAG

编写点文件时，我将节点形状设置为圆形并填充两种颜色以生成饼图DAG。问题是我想使用工具提示来显示数据百分比。有没有简单的方法来实现这一目标？谢谢你的帮助。使用graphviz和d3生成饼图时获得百分比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>

来源

2017-08-29 Siman Wang

使用像这样的节点上Graphviz属性tooltip：

<!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>

来源

2017-08-29 16:13:34 magjac

感谢了很多！这真的很有帮助。 –

很高兴能有帮助！如果您觉得它对您有用，请随时[接受我的回答]（https://meta.stackexchange.com/q/5234）。 :-) – magjac

使用graphviz和d3生成饼图时获得百分比DAG

回答

相关问题