search

fbreitwieser / sankeyD3

D3 Sankey Network Graphs from R
65 stars 27 forks source link

handle d3v3, d3v4 conflicts with other htmlwidgets #4

Open timelyportfolio opened 7 years ago

timelyportfolio commented 7 years ago

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

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

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).