title: d3.js liquid fill gauge clip-path not working
body: <p>I'm trying to use <a href="https://gist.github.com/brattonc/5e5ce9beee483220e2f6" rel="nofollow noreferrer">d3.js liquid fill gauge</a> in my angular2 webapp, but the clippath not working, which means there's no wave created at all. </p>
  
  <p><a href="https://i.stack.imgur.com/3Bmga.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Bmga.png" alt="enter image description here"></a> rather than <a href="https://i.stack.imgur.com/ydDsB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ydDsB.png" alt="enter image description here"></a></p>
  
  <p>Since angular2 is running typescript, so I tweak something to fix syntax error. The code snippet of clip path is as below.</p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p>I've no idea how to fix it. Is it possible the change <code>return waveScaleX(d.x)</code> to <code>return waveScaleX(d[0])</code> fails it? But typescript doesn't accept the former syntax.</p>