Giter Site home page Giter Site logo

Refactor as node module about d4 HOT 7 OPEN

heavysixer avatar heavysixer commented on July 26, 2024
Refactor as node module

from d4.

Comments (7)

heavysixer avatar heavysixer commented on July 26, 2024

Hey @nsonnad as far as I understand your point I think you are entirely correct. It may be just reconfiguring the way d4 exposes itself as a variable. I assume we can follow whatever steps d3 does since it obviously works within node.

from d4.

nsonnad avatar nsonnad commented on July 26, 2024

I guess we'll want to support all of: UMD, bower, CommonJS (ie node), webpack. It looks like in-progress d3 version 4.0 is using ES6 and a custom version of bundler, while d3 3.x uses Makefile targets. There is also browserify's standalone build option, which might be the best option.

from d4.

mhkeller avatar mhkeller commented on July 26, 2024

+1 for a CommonJS compatible version

from d4.

mhkeller avatar mhkeller commented on July 26, 2024

A very quick attempt at this and found some issues to work out. I haven't been able to run the tests since that rebuilds the library and I've simply made changes to the compiled d4.js file.

  • I got rid of all intermediate anonymous functions and made one large one
  • It relies on a global d3 reference, so in its environment check, it should load var d3 = require('d3') if it's in CommonJs etc.
  • For some reason I get the following error on tspan.
  if (tspan.node().getComputedTextLength() > width - Math.abs(x)) {
                         ^
TypeError: tspan.node(...).getComputedTextLength is not a function

Logging tspan gives

 [ { _events: {},
      _childNodesList: null,
      _ownerDocument: [Object],
      _childrenList: null,
      _version: 1,
      _memoizedQueries: {},
      _readonly: false,
      _namespaceURI: 'http://www.w3.org/2000/svg',
      _prefix: null,
      _localName: 'tspan',
      _attributes: [Object],
      _settingCssText: false,
      _style: [Object],
      _attached: true,
      _attachedToDocument: true,
      __data__: 700 },
    parentNode: { _events: {},
      _childNodesList: null,
      _ownerDocument: [Object],
      _childrenList: null,
      _version: 2,
      _memoizedQueries: {},
      _readonly: false,
      _namespaceURI: 'http://www.w3.org/1999/xhtml',
      _prefix: null,
      _localName: 'html',
      _attributes: {},
      _settingCssText: false,
      _style: [Object],
      _attached: true,
      _attachedToDocument: true } ] ]

Commenting out that if statement seems to get the library working. I'll try and find time to investigate more and get the tests working to see about any unintended consequences. If someone else wants to jump on too that'd be great.

from d4.

heavysixer avatar heavysixer commented on July 26, 2024

Thanks for the progress @mhkeller. Let me see if I can help suss things out. I think that @nsonnad was working on this too.

from d4.

heavysixer avatar heavysixer commented on July 26, 2024

@mhkeller is your work in a fork i can see?

from d4.

mhkeller avatar mhkeller commented on July 26, 2024

Here you go. The diff is ugly since the version I had pulled from npm was 8.10 but I forked a more recent version. I was gonna redo but I couldn't find the exact tag in the GitHub releases so figured the diff would be messy in any event.

To help, I've added inline comments documenting the bulleted changes described above: mhkeller@d16c91c

from d4.

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.