Coder Social home page Coder Social logo

Examples. about d3-drag HOT 8 CLOSED

d3 avatar d3 commented on April 28, 2024
Examples.

from d3-drag.

Comments (8)

syntagmatic avatar syntagmatic commented on April 28, 2024 1
  • dragging rects in a partition graph to reorder subtrees (using d3.hierarchy's node.sort)

This example's almost ready to go, just waiting for d3-drag to be included in (alpha 36?). Currently clicking will flip every subtree. http://stamen.github.io/metag/partition/thiocyanate-reorderable.html

from d3-drag.

mbostock avatar mbostock commented on April 28, 2024

@syntagmatic I’ll release a new alpha build soon, but I’ve just released d3-drag 0.1 so you could also use the modules individually if you want to test. Something like this:

<script src="https://d3js.org/d3.v4.0.0-alpha.35.js"></script>
<script>

d3_dispatch =
d3_selection = d3;

</script>
<script src="https://d3js.org/d3-drag.v0.1.js"></script>

from d3-drag.

syntagmatic avatar syntagmatic commented on April 28, 2024

Doesn't quite work-- looks like drag needs the new d3_selection.customEvent. I'll try including all the modules separately when I get the chance... unless you publish the new alpha first!

from d3-drag.

mbostock avatar mbostock commented on April 28, 2024

from d3-drag.

mbostock avatar mbostock commented on April 28, 2024

I’ve just published alpha 36 alpha 37 (had an oopsie).

from d3-drag.

mbostock avatar mbostock commented on April 28, 2024

Close enough!

from d3-drag.

syntagmatic avatar syntagmatic commented on April 28, 2024

Thanks, got an initial drag of subtrees working:

http://stamen.github.io/metag/partition/thiocyanate-draggable.html

partition-draggable

Right now you need to cross the midpoint of the next node to reorder... it feels a bit too stubborn. Once I get the interaction feeling better I'll post a reference bl.ock.

from d3-drag.

mbostock avatar mbostock commented on April 28, 2024

Nice work! I might try smooth interpolation when reordering, too. It tends to work better with interaction than transitions because interaction can rapidly trigger reorderings which would interrupt fixed-duration transitions.

from d3-drag.

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.