GithubHelp home page GithubHelp logo

SVG container about circosjs HOT 6 OPEN

nicgirault avatar nicgirault commented on August 15, 2024 2
SVG container

from circosjs.

Comments (6)

gaitat avatar gaitat commented on August 15, 2024 2

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

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

from circosjs.

nicgirault avatar nicgirault commented on August 15, 2024

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.

gaitat avatar gaitat commented on August 15, 2024

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.

winni2k avatar winni2k commented on August 15, 2024

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.

winni2k avatar winni2k commented on August 15, 2024

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.

erichartline avatar erichartline commented on August 15, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.