d3.js液体充填ゲージクリップパスが動作しない

Question

私はangular2 webappにd3.js liquid fill gaugeを使用しようとしていますが、clippathは機能しません。つまり、全くウェーブが作成されていません。

ではなく

angular2はtypescriptですが実行されているので、私は、構文エラーを修正するために何かを微調整しているので。クリップパスのコードスニペットは次のとおりです。

// 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); 

どのように修正するかわかりません。変更が可能ですか？return waveScaleX(d.x)〜return waveScaleX(d[0])に失敗しますか？しかし、typescriptは以前の構文を受け入れません。

Answer 1

私はついにあなたのエラーを再現できました。まず、あなたのタイスクリプトファイルにliquidFillGuage.jsをカット/ペーストしないでください。これは非常に多くのレベルでは正しくありません。あなたの質問は、2つの部分に分かれています。どのように含めるべきですか？には、という形容詞が付いています。 angular2、typescript、systemjsには、一般に2通りの方法があります。 1つは、適切なモジュールを使用して、あなたのTSにモジュールをインポート/要求することです。 2つ目は、<script>にあなたの依存関係を設定して、typescriptが認識できるように周囲のモジュールとして設定することです。 d3の場合は前者が動作しますが、liquidFillGuageの場合は後者を使用します。

d3がインストール取得：あなたsystemjs.config.jsで

npm install d3 
typings install d3 

、参照D3：

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

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

あなたではindex.htmlにし、liquidFillGuageへ<script src=を含める：

<!-- 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> 

ここでは難しい部分がありますが、どのようにタイプスクリプトにabo ut liquidFillGauge？通常、ほとんどの場合、someone would have created.d.tsファイルです。このようなものについては、あなた自身が必要です。 typings/browser/ambientで

、それに追加し、liquidFillGuageという名前のフォルダとindex.d.tsという名前のフォルダ内のファイルを作成します。

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

これは、これらの機能と彼らが取るパラメータについてtypescriptですに伝えます。 browser.d.tsで

は、この新しいdファイルへの参照を追加します。

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

そして最後に、あなたのコンポーネントファイルでは、この新しい環境DEFについてtypescriptです教える：

/// <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(); 

.... 

最新の質問

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

 関連する問題

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