javascript - d3.js 液体填充计剪辑路径不工作

Question

我正在尝试使用 d3.js liquid fill gauge在我的 angular2 webapp 中，但 clippath 不起作用，这意味着根本没有创建波浪。

而不是

由于 angular2 正在运行 typescript ，所以我调整了一些东西来修复语法错误。剪辑路径的代码片段如下。

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

我不知道如何修复它。是否有可能将 return waveScaleX(d.x) 更改为 return waveScaleX(d[0]) 失败了？但是 typescript 不接受前一种语法。

Answer 1

你需要在 liquidFillGauge.js 的 clip-path 中添加 location.href

这个:

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

变成这样:

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

这是我应用了修复程序的要点分支。 https://gist.github.com/jonbgallant/e85bc5440a4372aff9452e15a4e3276c