Estou tentando usarmedidor de preenchimento líquido d3.js. no meu webapp angular2, mas o clippath não está funcionando, o que significa que não há onda criada.

ao invés de

Como o angular2 está em execução, então eu ajusto algo para corrigir o erro de sintaxe. O trecho de código do caminho do clipe é como abaixo.

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

Não faço ideia de como consertar. É possível a mudançareturn waveScaleX(d.x) parareturn waveScaleX(d[0]) falha? Mas o texto datilografado não aceita a sintaxe anterior.