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

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