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 <script> your dependency in and then set if up as ambient module so that typescript knows about. For d3, the former works, but for liquidFillGuage, I'd use the latter.

Get d3 installed:

npm install d3
typings install d3

In you systemjs.config.js, reference d3:

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

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

In you index.html, include a <script src= to 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>

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:

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

And finally in your component file, tell typescript about this new ambient 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(); 

 ....

Answer 2

You need to add location.href to the clip-path in liquidFillGauge.js

this:

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

becomes this:

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

Here's my fork of the gist with the fix applied. https://gist.github.com/jonbgallant/e85bc5440a4372aff9452e15a4e3276c