Comments (6)
I removed this line from the code and it works fine (for my case)
.append('div')
.style('position', 'relative')
from circosjs.
Hello @gaitat. Thanks for the feedback. By curiosity I would like to understand why you need circos to share the svg with something else. Can you explain?
It is a bit tricky to solve. Here is the part of the code dealing with containers: https://github.com/nicgirault/circosJS/blob/master/src/circos.js#L30-L32
Could you propose a pull request?
I guess you could handle two cases:
- when the container is in a svg (your case)
- when the container is not in an svg (current case)
Let me know if I can help you
from circosjs.
My issue is the div that you place above the created svg for the circos plot. Since my structure is of the form:
<svg><g><g>
<div>
<svg>circos plot</svg>
</div>
</g></g></svg>
That <div>
does not allow the structure to render even though an <svg>
inside another <svg>
is a valid structure. If you know of a way to avoid it please advise.
from circosjs.
A quick search reveals that div
elements are probably not valid child elements of an svg
element. Here is an SO answer, and the document structure section of the SVG spec also appears not to mention div
elements.
I would also like to embed circos plots inside circular graph nodes...
from circosjs.
Hmm, is this still an issue? If I use the code at https://cdn.rawgit.com/nicgirault/circosJS/v2/dist/circos.js, then I don't get a div
element inside the #chart
svg element?
If I run the code posted in #40 (comment), then I do not get an extra div element?
from circosjs.
Yes, this is still an issue. I was able to solve it by doing the same thing as @gaitat.
@nicgirault Right now I am using a forked version of circosJS that removes the div
container. This opens up circosJS quite a bit, as now I can create thumbnails of the chart, add in zooming, etc. by giving an svg
or g
element an id rather than div
. Let me know if you would like me to submit a pull request.
I should note that I am using circosJS in a React app, and this small code change made a world of a difference.
from circosjs.
Related Issues (20)
- How to deal with json string?
- Using CircosJS with Observable HOT 1
- events not working? HOT 1
- what input data are required to create a circos plot using miRNA and associated gene ?
- tooltipContent on chords chart HOT 1
- chords connecting two tracks HOT 1
- D3.queue is not a function HOT 1
- Source for Heat map calendar example HOT 1
- Community Feedback: CircosJS wrapper for Dash by Plotly - with zoom/pan & download feature
- Heatmap examples fails to load Firefox 64.0 HOT 1
- It seem是 HOT 2
- Add images just next to the text or label
- Problem with Histogram HOT 1
- Problem with Stack
- Choords not visible ! HOT 1
- Chords: conf.tooltipContent is not a function HOT 1
- version 2.2.0 not available on npm
- whether the width of source-target line can be changed in Chords?
- How to initiate Chords plot in javascript?
- Anyway to use this library on Mobile with React Native?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from circosjs.