d3.js液体填充量计夹子路径不起作用

Question

我试图在我的angular2 webapp中使用d3.js liquid fill gauge，但clippath无效，这意味着根本没有创建wave。

而不是

由于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])是否有可能失败？但是打字稿并不接受以前的语法。

Answer 1

您需要将location.href添加到liquidFillGauge.js

中的clip-path

这样：

var fillCircleGroup = gaugeGroup.append("g")
    .attr("clip-path", "url(#clipWave" + elementId + ")");

成为这个：

var fillCircleGroup = gaugeGroup.append("g")
    .attr("clip-path", "url(" + location.href + "#clipWave" + elementId + ")");

这是我应用修复的要点。 https://gist.github.com/jonbgallant/e85bc5440a4372aff9452e15a4e3276c

Answer 2

好的，我终于能够重现你的错误了。首先，不要将liquidFillGuage.js剪切/粘贴到您的打字稿文件中。这在很多层面上都是不对的。然后你的问题变成了两个部分，我如何包含它，以及如何获得知道的打字稿。使用angular2，typescript和systemjs通常有两种工作方式。一，是在你的ts中使用适当的模块和import / require模块。二，是<script>你的依赖关系，然后设置为环境模块，以便打字稿知道。对于d3，前者有效，但对于liquidFillGuage，我会使用后者。

安装d3：

npm install d3
typings install d3

在你的systemjs.config.js中，参考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>

现在，这是一个棘手的部分，我们如何让打字稿知道liquidFillGauge？通常，对于大多数事情，yii2-settings .d.ts为它提供文件。但是，对于这样的事情，你需要自己的。

在typings/browser/ambient中，创建名为liquidFillGuage的文件夹和名为index.d.ts的文件夹中的文件，添加到其中：

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

这会告诉打字稿这些函数以及它们采用的参数。

在browser.d.ts中添加对此新d文件的引用：

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

最后在你的组件文件中，告诉typescript这个新的环境def：

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

 ....