2016-07-25 8 views
7

मैं डी 3 प्राप्त करने और अपने Angular2 ऐप के साथ चलने की कोशिश कर रहा हूं।
लेकिन वहाँ नई D3v4 और उपलब्ध typings फ़ाइल के साथ वर्तमान में एक मुद्दा है, यानी इस तरह के अब उपलब्ध नहीं scale.linear() के बजाय scaleLinear() के रूप में नए तरीकों का इस्तेमाल करने में कोई त्रुटि
Property 'scaleLinear' does not exist on type 'typeof d3'.
 कोणीय 2/टाइपस्क्रिप्ट + डी 3 वी 4 - मैन्युअल रूप से टाइपिंग शामिल हैं?

में परिणाम होगा की कोशिश कर रहा हो रहा है

चूंकि tomwanzek पहले से ही इस मुद्दे पर और https://github.com/tomwanzek/d3-v4-definitelytyped पर नई परिभाषाओं को बनाने की कोशिश कर रहा है, इसलिए मैं सोच रहा था कि मेरे कोणीय 2 प्रोजेक्ट में पहले से ही उपलब्ध टाइपिंग फ़ाइलों को मैन्युअल रूप से शामिल करने का कोई तरीका है या नहीं?

+0

मुझे इस समय कोई रास्ता नहीं मिला है, इसलिए मैंने किसी भी प्रकार के साथ d3v4 ऑब्जेक्ट को परिभाषित किया है और मेरे मजेदार तरीके से चला गया है। जब वे समाप्त हो जाएंगे तो बोर्ड ऑन-बोर्ड लाएंगे। लेकिन अगर कोई रास्ता है, तो मैं भी जानना चाहता हूं। –

+0

आपने यह कैसे किया? मेरे पास वर्तमान में 'डी 3' से डी 3 के रूप में 'आयात * है;' लेकिन 'आयात * डी 3 के रूप में: किसी भी' डी 3 'से; 'काम नहीं करता है ... – TommyF

+0

मैं अपने स्वयं के स्क्रिप्ट तत्व में पृष्ठ में d3 लोड करता हूं, फिर पकड़ लेता हूं यह एक विस्तारित कोणीय का उपयोग कर मेरे नियंत्रक में। IWindowService जो सिर्फ 'd3: any' संपत्ति जोड़ता है। –

उत्तर

2

मैं @ प्रकार/d3v4 की drewmoore के सुझाव के बारे में पता नहीं है, लेकिन @ प्रकार/d3-मॉड्यूल काम करता है, हालांकि यह जरूरी है टाइपप्रति 2.0 के रूप में उल्लेख किया है।

प्रत्येक d3 मॉड्यूल आप उपयोग के लिए @types पैकेज को स्थापित करें, उदाहरण के अक्ष होगा:

npm install --save-dev @types/d3-axis 

मैं इन से आते हैं लगता है: Issue 56

: https://github.com/tomwanzek/d3-v4-definitelytyped प्रत्येक डी 3 मॉड्यूल की स्थिति/उपलब्धता की जाँच करें

जाहिर है, NPM @types भविष्य में typings और tsd बदल देगा: The Future of Declaration Files

1

मैं drewmoore के suggestiong eit के बारे में यकीन नहीं है उसके। यह मेरे लिए काम नहीं लग रहा था।

मुझे जारी रखने के लिए दो सुझाव मिल गए हैं।

सर्वोत्तम उत्तर

पहले आर्लो के जवाब का एक परिशिष्ट है। जब मैंने मूल रूप से इस टिप्पणी को लिखा, तो मुझे काम के जवाब में अरलो का जवाब नहीं मिला। अब मुझे समझ में आया क्यों। मैं डी 3-पदानुक्रम पैकेज का उपयोग करने की कोशिश कर रहा था। तो स्थापित करने:

npm install d3 --save 
npm install @types/d3 --save-dev 
npm install @types/d3-hierarchy --save-dev 

और फिर मॉड्यूल इस तरह का उपयोग कर:

import * as d3 from "d3"; 

d3.hierarchy(blah); 

और फिर यह शिकायत करेगा कि यह d3.hierarchy सदस्य के बारे में पता नहीं था। अब मैं समझता हूं कि मुझे उस वस्तु का उपयोग करना होगा (मुझे नहीं पता कि यह पहले क्यों पंजीकृत नहीं हुआ था)। तो, अद्यतन:

import * as d3 from "d3"; 
import * as d3Hierarchy from "d3-hierarchy"; 

d3Hierarchy.hierarchy(blah); 

मूल उत्तर

क्या केवल जवाब मैं अब तक d3-ng2-service लिंक पर स्थित मॉड्यूल उपयोग कर रहा है मिल गया है लगता है। यह एक अच्छा स्विच नहीं है, लेकिन यह आपको अपने कोणीय 2 प्रोजेक्ट में d3v4 का उपयोग करने की अनुमति देता है।

रीडमी एक अंश कैसे एक कोणीय 2 घटक में इसका इस्तेमाल करने के नीचे पाया जा सकता है:

import { Component, OnInit, ElementRef } from '@angular/core'; 
import { D3Service, D3, Selection } from 'd3-ng2-service'; // <-- import the D3 Service, the type alias for the d3 variable and the Selection interface 

@Component({ 
    selector: 'app-test-d3', 
    templateUrl: 'test-d3.component.html', 
    styleUrls: ['test-d33.component.css'] 
}) 
export class TestD3Component implements OnInit { 

    private d3: D3; // <-- Define the private member which will hold the d3 reference 
    private parentNativeElement: any; 

    constructor(element: ElementRef, d3Service: D3Service) { // <-- pass the D3 Service into the constructor 
    this.d3 = d3Service.getD3(); // <-- obtain the d3 object from the D3 Service 
    this.parentNativeElement = element.nativeElement; 
    } 

    ngOnInit() { 
    let d3 = this.d3; // <-- for convenience use a block scope variable 
    let d3ParentElement: Selection<any, any, any, any>; // <-- Use the Selection interface (very basic here for illustration only) 

// ... 

    if (this.parentNativeElement !== null) { 

     d3ParentElement = d3.select(this.parentNativeElement); // <-- use the D3 select method 

     // Do more D3 things 

    } 
    } 

} 
+0

एकाधिक डी 3 आयात से बचने के लिए नीचे उत्तर देखें –

2

AMB0027

import * as d3 from "d3"; 
import * as d3Hierarchy from "d3-hierarchy"; 

d3Hierarchy.hierarchy(blah); 

का संभावित हल से जवाब पर बनाता क्लीनर कोड

के लिए

अपनी परियोजना में एक d3-bundle.ts फ़ाइल बनाएं;

export * from "d3-selection" 
export * from "d3-heirachy" 

डी 3 का उपयोग कर टीएस में - अब आप कर सकते हैं;

import * as d3 from "./d3-bundle" 

d3.hierarchy(blah) 

विशेष रूप से "scaleLinear" त्रुटि

npm install @types/d3-axis 

और

export * from "d3-axis" 
अपने d3-bundle.ts

नोट वहाँ पर इस से संबंधित मुद्दों कर रहे हैं

जोड़ने से बचने के लिए टाइपस्क्रिप्ट https://github.com/Microsoft/TypeScript/issues/9681

7

अरलो के उत्तर के संदर्भ में, मुझे एक संक्षिप्त इतिहास और वर्तमान उत्तर के साथ विस्तार करने दें। मैंने नए डी 3 संस्करण 4 टाइपस्क्रिप्ट परिभाषाओं को विकसित करने के लिए रेपो https://github.com/tomwanzek/d3-v4-definitelytyped बनाया, जब डी 3 वी 4 अभी तक अंतिम नहीं था और टाइपस्क्रिप्ट 2 क्षितिज पर था। उत्तरार्द्ध एक प्रमुख कारक था, क्योंकि इसने परिभाषाओं को लिखा है और इसे हासिल किया जा सकता है, यानी @types।

रेपो पर सूचीबद्ध सहयोगियों को कुछ उल्लेखनीय टिप्पणियों के साथ, हमने परिभाषाओं को अंतिम रूप दिया और उन्हें DefinitelyTyped पर माइग्रेट कर दिया। वे अब प्रकार-2.0 निश्चित रूप से परिभाषित की शाखा में सक्रिय रूप से बनाए रखा जाता है। वह शाखा है जो एनपीएम @types पर प्रकाशित है।

कुछ भ्रम जो आपने देखा होगा, को इस तथ्य के साथ करना था कि व्यक्तिगत डी 3 वी 4 मॉड्यूल परिभाषा, उदा। डी 3-चयन, कुछ समय के लिए npm install --save @types/d3-selection के माध्यम से उपलब्ध था। हालांकि, कल तक npm install --save @types/d3 द्वारा अधिग्रहित परिभाषा ने अभी भी पुरानी डी 3 v3.5.x परिभाषा को खींचा है।

फिलहाल, डी 3 v4 स्टैंडर्ड बंडल परिभाषाओंnpm install --save @types/d3 (डी 3 v3.5 के लिए विरासत संस्करण परिभाषाएँ अभी भी एक 3.5 संस्करण प्राप्त करके @types से खींचा जा सकता यदि आवश्यकता हुई)

से उपलब्ध हैं आयात साथ परिभाषाओं का उपयोग के लिए के रूप में:

  • स्थापित करने और एक ही समय में स्थापित करने डी 3 मॉड्यूल पहले से ही निहित ('@ प्रकार/d3' 'डी 3' और, क्रमशः) से d3 स्टैंडर्ड बंडल का उपयोग न करें इसमें अलग से, उदाहरण के लिए 'डी 3-पदानुक्रम' और '@ प्रकार/डी 3-पदानुक्रम'।

के रूप में कोणीय 2, हाँ, d3-NG2 सेवा या कुछ इसी तरह एक रास्ता तय करना है।मुझे यकीन है कि इसमें सुधार हो सकते हैं, यह कोणीय-क्ली के संयोजन के साथ तेजी से प्रोटोटाइप के लिए शुरू किया गया था।

संबंधित मुद्दे