d3.js liquid fill gauge clip-path not working

Question

I\'m trying to use d3.js liquid fill gauge in my angular2 webapp, but the clippath not working, which means there\'s no wave created at all.

rather than

Since

Answer 1

Ok, I was finally able to reproduce your error. First, do not just cut/paste the liquidFillGuage.js into your typescript file. This is just not right on so many levels. Then your question becomes, two parts, how do I include it and how do I get typescript to know about it. With angular2, typescript and systemjs there's generally two ways to work. One, is to use proper modules and import/require modules in your ts. Two, is to ...

Now, here's the tricky part, how do we get typescript to know about liquidFillGauge? Usually, for most things, someone would have created .d.ts file for it. For something like this, though, you'll need your own.

In typings/browser/ambient, create a folder named liquidFillGuage and a file in that folder named index.d.ts, add to it:

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

This tells typescript about these functions and what parameters they take.

In browser.d.ts add a reference to this new d file:

/// 

And finally in your component file, tell typescript about this new ambient def:

/// 

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

 ....