d3.js 液体填充量规剪辑路径不起作用

Question

我正在尝试在我的 angular2 webapp 中使用d3.js liquid fill gauge，但剪辑路径不起作用，这意味着根本没有创建任何波。

而不是

由于 angular2 正在运行 typescript，所以我调整了一些东西来修复语法错误。剪辑路径的代码sn-p如下。

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

您需要将 location.href 添加到liquidFillGauge.js 中的剪辑路径

这个：

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.xml 中使用正确的模块和导入/需要模块。二，是 <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 中，将 <script src= 包含到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>

现在，这是棘手的部分，我们如何让 typescript 知道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" />

最后在你的组件文件中，告诉 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(); 

 ....