Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

handle d3v3, d3v4 conflicts with other htmlwidgets #4

Open
timelyportfolio opened this issue Oct 26, 2016 · 2 comments

Comments

@timelyportfolio
Copy link
Collaborator

commented Oct 26, 2016

conflict v3 to v4

Until other htmlwidgets have converted to d3v4, the dependency management mechanism will choose the greatest version for d3, which will be d3v4. Then the window.d3 will be version 4 which will cause all other htmlwidgets on the page to fail. This will become more and more problematic, since the conversion by other widgets to d3 seems like it will be very slow.

solutions?

I am not sure how best to handle, so I thought I would start the discussion. Currently I have only one solution and it is unfortunately not ideal.

  1. change d3v4 to be window.d3v4 or something other than window.d3. This is an easy change but would require all references to d3 to be changed to d3v4. Also, it would mean we would have two sets of d3. Fortunately, d3 is not massive, but total would be about 500kb.
@lrmelt

This comment has been minimized.

Copy link

commented Nov 2, 2016

Can you explain how to implement your current work around please? Where would I change "d3" to "d3v4"? Inside the d3.min of the particular package using v4? Or on the html page itself? Or somewhere else altogether?

@timelyportfolio

This comment has been minimized.

Copy link
Collaborator Author

commented Apr 6, 2017

very painful and ugly example of a standalone build to prevent conflicts with window.d3 using different versions posted in https://github.com/timelyportfolio/sankeyD3/tree/standalone

To complete the build, I

  1. run npm install in javascript/lib/d3-sankey using the modified package.json to get all necessary d3 dependencies. I modified the d3-sankey package.json out of laziness. For correctness, we should create a package.json in javascript directory to install the d3 modules for the htmlwidget.

  2. Copy node_modules directory from javascript/lib/d3-sankey to javascript/. See above for the correct way to do to avoid this.

  3. cd javascript

  4. rollup -g d3-selection:d3,d3-array:d3,d3-zoom:d3,d3-scale:d3,d3-color:d3,d3-drag:d3,d3-collection:d3,d3-axis:d3,d3-interpolate:d3 -f umd -n sankeyNetwork -o sankeyNetwork-rollup.js -- index.js

  5. browserify sankeyNetwork-rollup.js > sankeyNetwork.js

  6. cp sankeyNetwork.js ../inst/htmlwidgets/sankeyNetwork.js

Then for now when calling sankeyNetwork use colourScale = "d3Scale.scaleOrdinal().range(d3Scale.schemeCategory20).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.