d3.js液体填充压力表夹路径不工作 [英] d3.js liquid fill gauge clip-path not working

问题描述

我想在我的angular2 webapp中使用，而不是

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

  //剪切波形区域。 
 var clipArea = d3.svg.area（）
 .x（function（d）{return waveScaleX（d [0]）;}）//它是dx在js版本
。 y0（function（d）{return waveScaleY（Math.sin（Math.PI * 2 * config.waveOffset * -1 + Math.PI * 2 *（1-config.waveCount）+ d [1] * 2 * PI））;}）// it is dy 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 ，0）; 
 
 //带有裁剪波的内圆。 
 var fillCircleGroup = gaugeGroup.append（g）
 .attr（clip-path，url（#clipWave+ elementId +））; // clippath不工作
 
 fillCircleGroup.append（circle）
 .attr（cx，radius）
 .attr（cy，radius）
 .attr（r，fillCircleRadius）
 .style（fill，config.waveColor）; 
  

我不知道如何解决它。是否可能的变化返回waveScaleX（d.x）到返回waveScaleX（d [0]）失败？但是typescript不接受前面的语法。

解决方案

您需要将location.href添加到liquidFillGauge中的剪辑路径。 js

这个：

  var fillCircleGroup = gaugeGroup.append g）
 .attr（clip-path，url（#clipWave+ elementId +））; 
  

变为：

  var fillCircleGroup = gaugeGroup.append（g）
 .attr（clip-path，url（+ location.href +#clipWave+ elementId +）） ; 
  

这是我应用修复的gist的fork。
https://gist.github.com/jonbgallant/e85bc5440a4372aff9452e15a4e3276c

I'm trying to use d3.js liquid fill gauge in my angular2 webapp, but the clippath not working, which means there's no wave created at all.

rather than

Since angular2 is running typescript, so I tweak something to fix syntax error. The code snippet of clip path is as below.

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

I've no idea how to fix it. Is it possible the change return waveScaleX(d.x) to return waveScaleX(d[0]) fails it? But typescript doesn't accept the former syntax.

解决方案

You need to add location.href to the clip-path in liquidFillGauge.js

this:

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

becomes this:

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

Here's my fork of the gist with the fix applied. https://gist.github.com/jonbgallant/e85bc5440a4372aff9452e15a4e3276c

这篇关于d3.js液体填充压力表夹路径不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！