SVG container

[gaitat]

Hi,

Great project, In my project I need to have the svg created in my code vs. in the circosJS; Is there a way that I can bybass the creation of the svg in circosJS and append the created elements in an #id?

Thanks

[nicgirault]

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

[gaitat]

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.

[gaitat]

I removed this line from the code and it works fine (for my case)

.append('div')
      .style('position', 'relative')

[winni2k]

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...

[winni2k]

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 https://github.com/nicgirault/circosJS/issues/40#issuecomment-340271361, then I do not get an extra div element?

[erichartline]

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.