d3.js Füllstandsanzeige Clip-Pfad funktioniert nicht

Question

Ich versuche d3.js liquid fill gauge in meiner angular2 Webapp zu verwenden, aber der Clippath funktioniert nicht, was bedeutet, dass überhaupt keine Welle erzeugt wird.

statt

Seit angular2 Typoskript läuft, so zwicken ich etwas Syntaxfehler zu beheben. Das Code-Snippet des Clip-Pfads ist wie folgt.

// The clipping wave area. 
var clipArea = d3.svg.area() 
.x(function(d) { return waveScaleX(d[0]); }) // it was d.x in js version 
.y0(function(d) { return waveScaleY(Math.sin(Math.PI*2*config.waveOffset*-1 + Math.PI*2*(1-config.waveCount) + d[1]*2*Math.PI));}) // it was d.y in js version 
.y1(function(d) { return (fillCircleRadius*2 + waveHeight); }); 

var waveGroup = gaugeGroup.append("defs") 
.append("clipPath") 
.attr("id", "clipWave" + elementId); 

var wave = waveGroup.append("path") 
.datum(data) 
.attr("d", clipArea) 
.attr("T", 0); 

// The inner circle with the clipping wave attached. 
var fillCircleGroup = gaugeGroup.append("g") 
.attr("clip-path", "url(#clipWave" + elementId + ")"); //clippath not working 

fillCircleGroup.append("circle") 
.attr("cx", radius) 
.attr("cy", radius) 
.attr("r", fillCircleRadius) 
.style("fill", config.waveColor); 

Ich habe keine Ahnung, wie es zu beheben ist. Ist es möglich, die Änderung return waveScaleX(d.x) zu return waveScaleX(d[0]) schlägt es fehl? Aber Typoskript akzeptiert die frühere Syntax nicht.

Answer 1

Ok, ich konnte endlich Ihren Fehler reproduzieren. Zuerst, nicht nur ausschneiden/fügen Sie die liquidFillGuage.js in Ihre Typoskript-Datei. Das ist auf so vielen Ebenen nicht richtig. Dann wird Ihre Frage, zwei Teile, wie schließe ich es ein und wie bekomme ich Typoskript zu wissen darüber. Mit angular2, typescript und systemjs gibt es generell zwei Möglichkeiten zu arbeiten. Eine, ist es, richtige Module zu verwenden und importieren/erfordern Module in Ihrem ts. Two, ist zu <script> deine Abhängigkeit in und dann wenn up wie Ambient-Modul, so dass Typoskript weiß über. Für d3 funktioniert das ehemalige, aber für liquidFillGuage, würde ich letzteres verwenden.

Get d3 installiert:

npm install d3 
typings install d3 

In Sie systemjs.config.js, Referenz d3:

var map = { 
    ... 
    'd3':       'node_modules/d3/d3.js' 
    ... 
}; 

var packages = { 
    ...  
    'd3':       { defaultExtension: 'js' } 
    ... 
}; 

In Sie index.html, gehören ein <script src= zu liquidFillGuage:

<!-- 1. Load libraries --> 
<!-- Polyfill(s) for older browsers --> 
<script src="node_modules/es6-shim/es6-shim.min.js"></script> 
...  
<script src="some/path/to/liquidFillGauge.js"></script> 

Nun, hier ist der knifflige Teil, wie erhalten wir Typoskript zu wissen, abo ut liquidFillGauge? In der Regel für die meisten Dinge, someone would have created.d.ts Datei dafür. Für so etwas brauchen Sie jedoch Ihre eigenen.

In typings/browser/ambient, erstellen Sie einen Ordner liquidFillGuage und eine Datei in diesem Ordner mit dem Namen index.d.ts, fügen Sie ihm benannt:

declare function loadLiquidFillGauge(i: any, j: any): any; 
declare function liquidFillGaugeDefaultSettings(): any; 

Dies sagt Typoskript über diese Funktionen und welche Parameter sie nehmen.

In browser.d.ts fügen Sie einen Verweis auf diese neue d Datei:

/// <reference path="browser/definitions/liquidFillGuage/index.d.ts" /> 

Und schließlich in der Komponentendatei, Typoskript über diese neue Umgebungs def sagen:

/// <reference path="../typings/browser/ambient/liquidFillGuage/index.d.ts" /> 

import { Component, ElementRef, Renderer } from '@angular/core'; 
import * as d3 from 'd3'; //<-- we can do this because d3 is a proper module 

... 

// typescript knows about this now! 
var gauge1 = loadLiquidFillGauge("fillgauge1", 55); 
var config1 = liquidFillGaugeDefaultSettings(); 

.... 

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.