Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

html label cannot render the online image #53

Closed
yuanqingfei opened this issue Apr 22, 2018 · 2 comments
Closed

html label cannot render the online image #53

yuanqingfei opened this issue Apr 22, 2018 · 2 comments
Labels
help wanted

Comments

@yuanqingfei
Copy link

I raised this ticket in viz.js project orginally. But cannot wait see it resolved. Don't know you can help. Thanks.

mdaines/viz-js#125
@magjac
Copy link
Owner

magjac commented Apr 23, 2018

Below is a way to do it with d3-graphviz. You can achieve the same thing with Viz.js as @mdaines points out in mdaines/viz-js#125 (comment)

See it live here

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

dotSrc = `
digraph {
    node [shape = box, color=blue];
    edge [dir = none];
    I0000 [label=<<table border="0" cellborder="0"><tr><td><img src="http://yuanqingfei.me/images/sparrow2.jpeg" width="50" height="60"/></td></tr><tr><td>清<br/>袁<br/>1122</td></tr></table>>]
}
`;

d3.select("#graph").graphviz()
    .addImage("http://yuanqingfei.me/images/sparrow2.jpeg", 50, 60)
    .renderDot(dotSrc);

</script>

@magjac magjac closed this as completed Apr 23, 2018
@yuanqingfei
Copy link
Author

You are always kind and helpful! Thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yuanqingfei @magjac