文章/答案/技术大牛

发布

社区首页 >问答首页 >使用graphviz和d3生成饼图时获取百分比

问使用graphviz和d3生成饼图时获取百分比
EN

Stack Overflow用户

提问于 2017-08-29 09:00:24

回答 1查看 186关注 0票数 1

在编写dot文件时，我将节点形状设置为圆形，并填充两种颜色以生成饼图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>

javascript

html

d3.js

svg

graphviz

回答 1

Stack Overflow用户

发布于 2017-08-30 00:13:34

在节点上使用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45929232

复制

相似问题

问使用graphviz和d3生成饼图时获取百分比
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用graphviz和d3生成饼图时获取百分比EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用graphviz和d3生成饼图时获取百分比
EN