search

nicgirault / circosJS

d3 library to build circular graphs
MIT License
507 stars 116 forks source link

SVG container #32

Open gaitat opened 7 years ago

gaitat commented 7 years ago

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 commented 7 years ago

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:

Let me know if I can help you

gaitat commented 7 years ago

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 commented 7 years ago

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

.append('div')
      .style('position', 'relative')
winni2k commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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.