Ich versuche, @ zu verwend d3.js Füllstandsanzeige in meiner angle2 webapp, aber der clippath funktioniert nicht, was bedeutet, dass überhaupt keine Welle erzeugt wird.

eher, als

Since angular2 führt Typoskript aus, daher optimiere ich etwas, um Syntaxfehler zu beheben. Das Code-Snippet des Clip-Pfads ist wie folgt.

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

Ich habe keine Ahnung, wie ich das beheben soll. Ist es möglich, die Änderungreturn waveScaleX(d.x) zureturn waveScaleX(d[0]) fällt es aus? Aber typescript akzeptiert die frühere Syntax nicht.