2016-08-21 9 views
8

मैं को d3 v4 के साथ RequJS का उपयोग करके लोड करने का प्रयास कर रहा हूं। मेरे मुख्य लिपि है:आवश्यकताजेएस में डी 3 वी 4 के साथ डी 3-चयन-बहु लोड करने का आसान तरीका क्या है?

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script> 
<script> 
    require.config({ 
     paths: { 
      "d3": "//d3js.org/d3.v4.min", 
      "d3-selection-multi": "//d3js.org/d3-selection-multi.v1.min", 
      "d3-queue": "//d3js.org/queue.v1.min", 
      "underscore": "//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min", 
      "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min", 
      "jquery_easing": "//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min", 
      "bootstrap": "//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min", 
      "moment": "//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min" 
     } 
    }); 
</script> 

लेकिन d3-selection-multid3-transition और d3-selection की आवश्यकता है, इसलिए यदि मैं उन जोड़ने तो मैं पता लगाने के d3-transitiond3-color और इतने पर और आगे की आवश्यकता है।

सामान्य d3 v4 के साथ नहीं आता d3-selection, d3-transition, d3-color, और यह सब? क्या इसका मतलब यह है कि एक बार जब मैं एक माइक्रो-लाइब्रेरी का उपयोग करना चुनता हूं तो मैं सामान्य d3 का उपयोग नहीं कर सकता और मुझे अन्य निर्भर माइक्रो-पुस्तकालयों के सभी को परिभाषित करने की आवश्यकता है ??

मैं d3-selection-multi का उपयोग करना चाहता था इसलिए {} वाक्यविन्यास का उपयोग न करने के लिए मुझे अपने सभी .attr() को फिर से लिखना नहीं था।

उत्तर

0

यदि आप अपने आवेदन को पूरी तरह से डी 3 माइक्रो-पुस्तकालयों में स्विच नहीं करना चाहते हैं, तो आप निर्भरता को map कॉन्फ़िगरेशन द्वारा बंडल डी 3 लाइब्रेरी में संदर्भित कर सकते हैं। आप आवश्यक निर्भरता here पा सकते हैं।

requirejs.config({ 
    paths: { 
     'd3': '...', 
     'd3-selection-multi': '...', 
     ... 
    }, 
    map: { 
     '*': { 
      'd3-color': 'd3', 
      'd3-dispatch': 'd3', 
      'd3-ease': 'd3', 
      'd3-interpolate': 'd3', 
      'd3-selection': 'd3', 
      'd3-timer': 'd3', 
      'd3-transition': 'd3' 
     } 
    } 
}); 
संबंधित मुद्दे