使用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

回答

相關問題