graphvizとd3を使って円を生成するときにパーセンテージを得るDAG

ドットファイルを書くとき、ノードの形状を円形に設定し、2つの色で塗りつぶして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

答えて

関連する問題