title: d3 v4 plugin - How to require other d3 plugins?
body: <p>I'm trying to build a d3 v4 plugin following <a href="https://bost.ocks.org/mike/d3-plugin/" rel="nofollow noreferrer">https://bost.ocks.org/mike/d3-plugin/</a> - the ultimate goal is to be able npm install the plugin and use it in an Angular 2/4 component.</p>
  
  <p>My repo is here:</p>
  
  <p><a href="https://github.com/denisemauldin/d3-timeline" rel="nofollow noreferrer">https://github.com/denisemauldin/d3-timeline</a></p>
  
  <p>Examples: </p>
  
  <p><a href="https://denisemauldin.github.io/d3-timeline/examples/example.html" rel="nofollow noreferrer">https://denisemauldin.github.io/d3-timeline/examples/example.html</a></p>
  
  <p>I'm running into issues trying to include other d3 requirements.  The above doesn't include examples of how to use other d3 components.
  I need to use <code>d3.timeFormat</code>, <code>d3.timeHour</code>, <code>d3.scaleOrdinal</code>, <code>d3.schemeCategory</code>, <code>d3.mouse</code>, <code>d3.select</code>, <code>d3.axisTop</code>, <code>d3.axisBottom</code>, and <code>d3.scaleLinear</code>.  </p>
  
  <p>These come from <code>d3-axis</code>, <code>d3-scale</code>, <code>d3-selection</code>, <code>d3-time</code>, and <code>d3-time-format</code>.  I've attempted a couple of different ways:</p>
  
  <p>1) Including them in the index.js as imports</p>
  
  <pre><code> import "d3-axis";
   import "d3-scale";
   import "d3-selection";
   import "d3-time";
   import "d3-time-format";
   export {default as timeline} from "./src/timeline";
  </code></pre>
  
  <p>2) Including it in the timeline.js source:</p>
  
  <pre><code>var d3 = Object.assign({}, require("d3-axis"), require("d3-scale"), require("d3-selection"), require("d3-time"), require("d3-time-format"));
  (function() {
      d3.timeline = function() {
                  //variable definitions
                  function timeline (gParent) {};
                  //method definitions
                  return timeline;
          };
  })();
  export default d3.timeline;
  </code></pre>
  
  <p>Right now it loads in the browser and works well, but I can't figure out how to get the npm install to work so that I can build a npm package for use with my Angular2 site.</p>
  
  <p>I've tried a number of different <code>rollup.config.js</code> options with <code>rollup-plugin-commonjs</code>.  I'm not sure that's the way I want to go because it seems to produce a bundle file that includes all of the d3 code I'm requiring.  Right now the rollup call (that was included in the d3 plugin starter bundle) is failing:</p>
  
  <pre><code>rm -rf build &amp;&amp; mkdir build &amp;&amp; rollup -c -f umd -n d3 -o build/d3-timeline.js -- index.js
  
  'default' is not exported by 'd3-timeline/src/timeline.js' (imported by 'd3-timeline/index.js')
  </code></pre>
  
  <p>If I remove my <code>rollup.config.js</code> then it gives me the same error, but also says:</p>
  
  <pre><code>Treating 'd3-axis' as external dependency
  Treating 'd3-scale' as external dependency
  Treating 'd3-selection' as external dependency
  Treating 'd3-time' as external dependency
  Treating 'd3-time-format' as external dependency
  </code></pre>
  
  <p>So, how do I update the <code>src/timeline.js</code> file to export default so that I can use it with <code>npm install d3-timeline</code> for use in Angular and also be able to be used in a browser?  Alternately, how do I configure rollup to make the current <code>src/timeline.js</code> file work?</p>
  
  <p>Thanks!</p>