我正在尝试使用 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 不接受前一种语法。
最佳答案
你需要在 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
关于javascript - d3.js 液体填充计剪辑路径不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37056050/