Question

隐藏/显示拉斐尔制成的物体时，我有很多错误。我有一个用拉斐尔制成的房屋-当单击按钮时，会显示一个轨距并进行动画处理，如果再次单击，房屋就会显示并进行动画处理（单击时功能会一遍又一遍地运行）

此功能在电话上显示，在普通桌面上未使用此功能。因此，我不能只将功能放在按钮上。

但是！这样做时我有很多错误。摆弄一个小提琴。 See it here.

完整的js代码在这里：

pv = 80;        
pointerv = Math.round(pv);


onload = function() {

$(function dogauge() {
  var Needle, arc, arcEndRad, arcStartRad, barWidth, chart, chartInset, degToRad, el, endPadRad, height, i, margin, needle, numSections, padRad, percToDeg, percToRad, percent, radius, ref, sectionIndx, sectionPerc, startPadRad, svg, totalPercent, width;

  percent = pointerv/100;

  barWidth = 40;

  numSections = 3;

  // / 2 for HALF circle
  sectionPerc = 1 / numSections / 2;

  padRad = 0.05;

  chartInset = 10;

  // start at 270deg
  totalPercent = .75;

  el = d3.select('.chart-gauge');

  margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 20
  };

  width = el[0][0].offsetWidth - margin.left - margin.right;

  height = width;

  radius = Math.min(width, height) / 2;

  percToDeg = function(perc) {
    return perc * 360;
  };

  percToRad = function(perc) {
    return degToRad(percToDeg(perc));
  };

  degToRad = function(deg) {
    return deg * Math.PI / 180;
  };

  svg = el.append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom);

  chart = svg.append('g').attr('transform', `translate(${(width + margin.left) / 2}, ${(height + margin.top) / 2})`);

// build gauge bg
  for (sectionIndx = i = 1, ref = numSections; (1 <= ref ? i <= ref : i >= ref); sectionIndx = 1 <= ref ? ++i : --i) {
    arcStartRad = percToRad(totalPercent);
    arcEndRad = arcStartRad + percToRad(sectionPerc);
    totalPercent += sectionPerc;
    startPadRad = sectionIndx === 0 ? 0 : padRad / 2;
    endPadRad = sectionIndx === numSections ? 0 : padRad / 2;
    arc = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth).startAngle(arcStartRad + startPadRad).endAngle(arcEndRad - endPadRad);
    chart.append('path').attr('class', `arc chart-color${sectionIndx}`).attr('d', arc);
  }

  Needle = class Needle {
    constructor(len, radius1) {
      this.len = len;
      this.radius = radius1;
    }

    drawOn(el, perc) {
      el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius);
      return el.append('path').attr('class', 'needle').attr('d', this.mkCmd(perc));
    }

    animateOn(el, perc) {
      var self;
      self = this;
      return el.transition().delay(500).ease('elastic').duration(3000).selectAll('.needle').tween('progress', function() {
        return function(percentOfPercent) {
          var progress;
          progress = percentOfPercent * perc;
          return d3.select(this).attr('d', self.mkCmd(progress));
        };
      });
    }

    mkCmd(perc) {
      var centerX, centerY, leftX, leftY, rightX, rightY, thetaRad, topX, topY;
      thetaRad = percToRad(perc / 2); // half circle
      centerX = 0;
      centerY = 0;
      topX = centerX - this.len * Math.cos(thetaRad);
      topY = centerY - this.len * Math.sin(thetaRad);
      leftX = centerX - this.radius * Math.cos(thetaRad - Math.PI / 2);
      leftY = centerY - this.radius * Math.sin(thetaRad - Math.PI / 2);
      rightX = centerX - this.radius * Math.cos(thetaRad + Math.PI / 2);
      rightY = centerY - this.radius * Math.sin(thetaRad + Math.PI / 2);
      return `M ${leftX} ${leftY} L ${topX} ${topY} L ${rightX} ${rightY}`;
    }

  };

  needle = new Needle(90, 15);

  needle.drawOn(chart, 0);

  needle.animateOn(chart, percent);
});


    $(function dohouse() {

    var paper = Raphael("frivardihouse", 250, 260);
    paper.customAttributes.step = function (s) {
      var len = this.orbit.getTotalLength();
      var point = this.orbit.getPointAtLength(s * len);
      return {
        transform: "t" + [point.x, point.y] + "r" + point.alpha
      };
    };


var bghouse = paper.path("M236.5,80.4L128.9,2.1c-1.6-1.1-3.7-1.1-5.3,0L16.1,80.4c-3.5,2.6-1.7,8.1,2.6,8.1l13,0c-1,2.5-1.5,5.3-1.5,8.2l0,122.7c0,12,9.2,21.7,20.6,21.7l150.9,0c11.4,0,20.6-9.7,20.6-21.7l0-122.7c0-2.9-0.5-5.7-1.5-8.2h13C238.2,88.6,240,83,236.5,80.4z").attr({fill: "#cccccc", stroke: "none"});

bghouse.glow({    
    width:10,
    fill:true,
    offsetx :0,
    offsety:3,
    color:'#bfbfbf'
}
);

function formatNumber(num) {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
}

function round(value, precision) {
    var multiplier = Math.pow(10, precision || 0);
    return Math.round(value * multiplier) / multiplier;
}

let ltv = (100 - 80)/100;

/*let vardi = <?=$graph->CurrentPropValue?>;
let boligvardi = "Boligværdi " + formatNumber(vardi);
let boligvardilink = boligvardi.link("https://realkreditkonsulenten.dk/kundeportal/?page=property");*/

let equity = 20;
let h = 144*ltv;
let y = 86+((1-ltv)*144);
let EqText = formatNumber (equity);
let ltvtxt = round(ltv * 100);

var green = "#59ba41";
var darkgreen = "#1a7266";
var yellow = "#fbb732";
var red = "#c80000";

var finalfillcolor = green;
if (ltv > 0.6) {
    finalfillcolor = darkgreen;
}
if (ltv > 0.82) {
    finalfillcolor = yellow;
}
if (ltv > 0.95) {
    finalfillcolor = red;
}

if (ltv > 1) {
    h = 144;
    y= 88;
}

var fillhouse = paper.rect(40.5,230,172.3,0).attr({fill: green, stroke: "none"});

/*skal hides hvis function mus kører*/
var sAnimation = Raphael.animation({ 'width': 172.3, 'height': h, 'x': 40.5, 'y': y, fill: finalfillcolor}, 2000, "backOut")
fillhouse.animate(sAnimation);



var thehouse = paper.path("M236.5,80.4L128.9,2.1c-1.6-1.1-3.7-1.1-5.3,0L16.1,80.4c-3.5,2.6-1.7,8.1,2.6,8.1l13,0c-1,2.5-1.5,5.3-1.5,8.2l0,122.7c0,12,9.2,21.7,20.6,21.7l150.9,0c11.4,0,20.6-9.7,20.6-21.7l0-122.7c0-2.9-0.5-5.7-1.5-8.2h13C238.2,88.6,240,83,236.5,80.4z M206.7,104.9l0,106.5c0,9-6.9,16.3-15.5,16.3l-129.9,0c-8.5,0-15.5-7.3-15.5-16.3l0-106.5c0-9,6.9-16.3,15.5-16.3l129.9,0C199.8,88.6,206.7,95.9,206.7,104.9z").attr({fill: "#ffffff", stroke: "none"});

var txtbelaning = paper.text(126.8,198, "BELÅNING").attr({"font-family": "Open sans", "font-weight":"700", "font-size": 20, "transform": "matrix(1 0 0 1 79.455 216.7752)", "fill":"#ffffff"});

/*var housevalue = paper.text(126.8,210, boligvardi).attr({"font-family": "Open sans", "font-weight":"400", "font-size": 13, "fill":"#ffffff"});*/



paper.customAttributes.txtprc = function (txtprc) {
  return {
    txtprc: [txtprc],
    text: Math.floor(txtprc) +"%" + '\n'
  }
}

var txtprc = paper
    .text(126.1,158.2)
    .attr({
        "font-size": 48, 
      "fill": "#ffffff",
      "font-family":"Open sans", 
      "font-weight":"700",
      txtprc: [0,1000]
    })


txtprc.animate({
   txtprc: [ltvtxt, 1000]
}, 2000, "easeInOut")


var txtfrivardi = paper.text(126.8,42.1, "FRIVÆRDI").attr({"font-family": "Open sans", "font-weight":"600", "font-size": 12, "transform": "matrix(1 0 0 1 98.6264 51.0823)", "fill":"#585857"});

paper.customAttributes.txtfrivardival = function (txtfrivardival) {
  return {
    txtfrivardival: [txtfrivardival],
    text: formatNumber(Math.floor(txtfrivardival)) + '\n'
  }
}

var txtfrivardival = paper
    .text(126.2,61.3)
    .attr({
        "font-size": 20, 
      "fill": "#585857",
      "font-family":"Open sans", 
      "font-weight":"700",
      txtfrivardival: [0,1000]
    })

txtfrivardival.animate({
   txtfrivardival: [equity, 1000]
}, 2000, "easeInOut")


});


};



$("#segaugeknap").click(function() {
    if($(this).text()=== "OVERVÅGNINGSBAROMETER"){
            $(this).text("TILBAGE");
            document.getElementById('chart-gauge').innerHTML = '';
            onload();

        }
        else{
            $(this).text("OVERVÅGNINGSBAROMETER");           
        }
  $('#frivardihouse, #housevalue_f, #gaugebox').slideToggle('slow');
  document.getElementById('frivardihouse').innerHTML = '';
  onload();

  });

Answer 1

摆脱多个房屋和可见的多个仪表

$("#segaugeknap").click(function() {
  if($(this).text()=== "OVERVÅGNINGSBAROMETER"){
      $(this).text("TILBAGE");
      document.getElementById('chart-gauge').innerHTML = '';
      onload();
  } else{
      $(this).text("OVERVÅGNINGSBAROMETER");
      document.getElementById('frivardihouse').innerHTML = '';
      onload();
  }
  $('#frivardihouse, #housevalue_f, #gaugebox').slideToggle('slow');
});

显示房屋时，您仍有多个仪表。

tspan错误仅在动画仍在进行时发生。经过上述修改，它只会在量规仍处于动画状态时发生。

Answer 2

您不应该在每次单击bottun时开始绘制2 svg 因此，第一步是分离2绘图函数并删除onload包装函数。

然后，当您单击guage按钮时，要等到幻灯片动画完成后，我们才能计算出规矩容器Div的宽度和高度，然后绘制标尺，并与房屋相同。

请检查以下我为您分叉的jsfiddle，并进行更改，希望对您来说很清楚。

Check the fiddle https://jsfiddle.net/tb1k5sgc/

pv = 80;		
pointerv = Math.round(pv);

function dogauge() {
  var Needle, arc, arcEndRad, arcStartRad, barWidth, chart, chartInset, degToRad, el, endPadRad, height, i, margin, needle, numSections, padRad, percToDeg, percToRad, percent, radius, ref, sectionIndx, sectionPerc, startPadRad, svg, totalPercent, width;

  percent = pointerv/100;

  barWidth = 40;

  numSections = 3;

  // / 2 for HALF circle
  sectionPerc = 1 / numSections / 2;

  padRad = 0.05;

  chartInset = 10;

  // start at 270deg
  totalPercent = .75;

  el = d3.select('.chart-gauge');

  margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 20
  };

  width = el[0][0].offsetWidth - margin.left - margin.right;
  height = width;

  radius = Math.min(width, height) / 2;

  percToDeg = function(perc) {
    return perc * 360;
  };

  percToRad = function(perc) {
    return degToRad(percToDeg(perc));
  };

  degToRad = function(deg) {
    return deg * Math.PI / 180;
  };

  svg = el.append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom);

  chart = svg.append('g').attr('transform', `translate(${(width + margin.left) / 2}, ${(height + margin.top) / 2})`);

// build gauge bg
  for (sectionIndx = i = 1, ref = numSections; (1 <= ref ? i <= ref : i >= ref); sectionIndx = 1 <= ref ? ++i : --i) {
    arcStartRad = percToRad(totalPercent);
    arcEndRad = arcStartRad + percToRad(sectionPerc);
    totalPercent += sectionPerc;
    startPadRad = sectionIndx === 0 ? 0 : padRad / 2;
    endPadRad = sectionIndx === numSections ? 0 : padRad / 2;
    arc = d3.svg.arc().outerRadius(radius - chartInset).innerRadius(radius - chartInset - barWidth).startAngle(arcStartRad + startPadRad).endAngle(arcEndRad - endPadRad);
    chart.append('path').attr('class', `arc chart-color${sectionIndx}`).attr('d', arc);
  }

  Needle = class Needle {
    constructor(len, radius1) {
      this.len = len;
      this.radius = radius1;
    }

    drawOn(el, perc) {
      el.append('circle').attr('class', 'needle-center').attr('cx', 0).attr('cy', 0).attr('r', this.radius);
      return el.append('path').attr('class', 'needle').attr('d', this.mkCmd(perc));
    }

    animateOn(el, perc) {
      var self;
      self = this;
      return el.transition().delay(500).ease('elastic').duration(3000).selectAll('.needle').tween('progress', function() {
        return function(percentOfPercent) {
          var progress;
          progress = percentOfPercent * perc;
          return d3.select(this).attr('d', self.mkCmd(progress));
        };
      });
    }

    mkCmd(perc) {
      var centerX, centerY, leftX, leftY, rightX, rightY, thetaRad, topX, topY;
      thetaRad = percToRad(perc / 2); // half circle
      centerX = 0;
      centerY = 0;
      topX = centerX - this.len * Math.cos(thetaRad);
      topY = centerY - this.len * Math.sin(thetaRad);
      leftX = centerX - this.radius * Math.cos(thetaRad - Math.PI / 2);
      leftY = centerY - this.radius * Math.sin(thetaRad - Math.PI / 2);
      rightX = centerX - this.radius * Math.cos(thetaRad + Math.PI / 2);
      rightY = centerY - this.radius * Math.sin(thetaRad + Math.PI / 2);
      return `M ${leftX} ${leftY} L ${topX} ${topY} L ${rightX} ${rightY}`;
    }

  };

  needle = new Needle(90, 15);

  needle.drawOn(chart, 0);

  needle.animateOn(chart, percent);
};

function dohouse() {

    var paper = Raphael("frivardihouse", 250, 260);
    paper.customAttributes.step = function (s) {
      var len = this.orbit.getTotalLength();
      var point = this.orbit.getPointAtLength(s * len);
      return {
        transform: "t" + [point.x, point.y] + "r" + point.alpha
      };
    };

   
var bghouse = paper.path("M236.5,80.4L128.9,2.1c-1.6-1.1-3.7-1.1-5.3,0L16.1,80.4c-3.5,2.6-1.7,8.1,2.6,8.1l13,0c-1,2.5-1.5,5.3-1.5,8.2l0,122.7c0,12,9.2,21.7,20.6,21.7l150.9,0c11.4,0,20.6-9.7,20.6-21.7l0-122.7c0-2.9-0.5-5.7-1.5-8.2h13C238.2,88.6,240,83,236.5,80.4z").attr({fill: "#cccccc", stroke: "none"});

bghouse.glow({    
    width:10,
    fill:true,
    offsetx :0,
    offsety:3,
    color:'#bfbfbf'
}
);

function formatNumber(num) {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')
}

function round(value, precision) {
    var multiplier = Math.pow(10, precision || 0);
    return Math.round(value * multiplier) / multiplier;
}

let ltv = (100 - 80)/100;

/*let vardi = <?=$graph->CurrentPropValue?>;
let boligvardi = "Boligværdi " + formatNumber(vardi);
let boligvardilink = boligvardi.link("https://realkreditkonsulenten.dk/kundeportal/?page=property");*/

let equity = 20;
let h = 144*ltv;
let y = 86+((1-ltv)*144);
let EqText = formatNumber (equity);
let ltvtxt = round(ltv * 100);

var green = "#59ba41";
var darkgreen = "#1a7266";
var yellow = "#fbb732";
var red = "#c80000";

var finalfillcolor = green;
if (ltv > 0.6) {
	finalfillcolor = darkgreen;
}
if (ltv > 0.82) {
	finalfillcolor = yellow;
}
if (ltv > 0.95) {
	finalfillcolor = red;
}

if (ltv > 1) {
	h = 144;
	y= 88;
}

var fillhouse = paper.rect(40.5,230,172.3,0).attr({fill: green, stroke: "none"});

/*skal hides hvis function mus kører*/
var sAnimation = Raphael.animation({ 'width': 172.3, 'height': h, 'x': 40.5, 'y': y, fill: finalfillcolor}, 2000, "backOut")
fillhouse.animate(sAnimation);



var thehouse = paper.path("M236.5,80.4L128.9,2.1c-1.6-1.1-3.7-1.1-5.3,0L16.1,80.4c-3.5,2.6-1.7,8.1,2.6,8.1l13,0c-1,2.5-1.5,5.3-1.5,8.2l0,122.7c0,12,9.2,21.7,20.6,21.7l150.9,0c11.4,0,20.6-9.7,20.6-21.7l0-122.7c0-2.9-0.5-5.7-1.5-8.2h13C238.2,88.6,240,83,236.5,80.4z M206.7,104.9l0,106.5c0,9-6.9,16.3-15.5,16.3l-129.9,0c-8.5,0-15.5-7.3-15.5-16.3l0-106.5c0-9,6.9-16.3,15.5-16.3l129.9,0C199.8,88.6,206.7,95.9,206.7,104.9z").attr({fill: "#ffffff", stroke: "none"});

var txtbelaning = paper.text(126.8,198, "BELÅNING").attr({"font-family": "Open sans", "font-weight":"700", "font-size": 20, "transform": "matrix(1 0 0 1 79.455 216.7752)", "fill":"#ffffff"});

/*var housevalue = paper.text(126.8,210, boligvardi).attr({"font-family": "Open sans", "font-weight":"400", "font-size": 13, "fill":"#ffffff"});*/



paper.customAttributes.txtprc = function (txtprc) {
  return {
    txtprc: [txtprc],
    text: Math.floor(txtprc) +"%" + '\n'
  }
}

var txtprc = paper
    .text(126.1,158.2)
    .attr({
    	"font-size": 48, 
      "fill": "#ffffff",
      "font-family":"Open sans", 
      "font-weight":"700",
      txtprc: [0,1000]
    })


txtprc.animate({
   txtprc: [ltvtxt, 1000]
}, 2000, "easeInOut")


var txtfrivardi = paper.text(126.8,42.1, "FRIVÆRDI").attr({"font-family": "Open sans", "font-weight":"600", "font-size": 12, "transform": "matrix(1 0 0 1 98.6264 51.0823)", "fill":"#585857"});

paper.customAttributes.txtfrivardival = function (txtfrivardival) {
  return {
    txtfrivardival: [txtfrivardival],
    text: formatNumber(Math.floor(txtfrivardival)) + '\n'
  }
}

var txtfrivardival = paper
    .text(126.2,61.3)
    .attr({
    	"font-size": 20, 
      "fill": "#585857",
      "font-family":"Open sans", 
      "font-weight":"700",
      txtfrivardival: [0,1000]
    })

txtfrivardival.animate({
   txtfrivardival: [equity, 1000]
}, 2000, "easeInOut")


};

$("#segaugeknap").click(function() {
 $('#frivardihouse, #gaugebox').slideToggle(400);
	if($(this).text()=== "OVERVÅGNINGSBAROMETER"){
            $(this).text("TILBAGE");
            document.getElementById('chart-gauge').innerHTML = '';
			  	setTimeout(dogauge, 401);			
        }
        else{
            $(this).text("OVERVÅGNINGSBAROMETER");      
             
  document.getElementById('frivardihouse').innerHTML = '';
  setTimeout(dohouse, 401);
        }
 
  });

$(document).ready(function(){
dohouse();
})

.chart-gauge {
    width: 100%;
    height: 180px;
    margin-left: 10px;
}

.chart-color1 {
  fill: rgb(200,0,0);
}

.chart-color2 {
  fill: rgb(251, 183, 50);
}

.chart-color3 {
  fill: rgb(89, 186, 65);;
}

.needle,
.needle-center {
  fill: #464A4F;
}

.prose {
  text-align: center;
  font-family: sans-serif;
  color: #ababab;
}
.gaugebox {display: none; border-radius: 0px 0px 5px 5px !important;margin-top: -10px !important;padding: 0px 10px 20px 10px !important;}

#segauge {background-color:#000;color:#fff;width:300px;margin: 0 auto;text-align:center;padding:10px;}

.gaugebox h4 {text-align: center;font-weight: 700;margin-bottom: 0px;}

.gaugebox .gaugetxt span:first-child(){float: left;}
.gaugebox .gaugetxt span:nth-child(2){float: right;}
.gaugetxt {width: 360px; margin: 0 auto;}


.gaugefullwrapper {
    background: #fff;
    border-radius: 10px;
    width: 380px;
    margin: 0 auto;
    padding-bottom: 10px;
    
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}

.gaugewrapper {margin: 0 auto; width: 350px }
div#gauge {
    width: 80%;height: 180px;margin: 0 auto;
}

/*hus*/
div#frivardihouse svg {
    margin: 0 auto;
    display: block;
    padding-top: 10px;
    transition: all 0.6s cubic-bezier(.87,-.41,.19,1.44)
}

div#frivardihouse svg:hover {transform: scale(1.04);
}

div#frivardihouse {
    margin-top: -20px;
}

.housevalue_f {text-align: center;padding-bottom: 10px;}
.housevalue_f a span {color: #17aec6;}
.housevalue_f a {color: #666666;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>

<div class="housegauge">
	
  
  <div class="graphs house">
  <div id="frivardihouse"></div>
    
<div class="w-btn-wrapper align_center" id="segauge"><span id="segaugeknap" class="w-btn style_solid size_medium color_primary icon_none">OVERVÅGNINGSBAROMETER</span></div>
	</div>





<div class="gaugebox" id="gaugebox">
	<div class="gaugefullwrapper">
		<div class="gaugewrapper">
			<div id="chart-gauge" class="chart-gauge"></div>
		</div>
		<div class="gaugetxt">
			<span>Langt fra omlægning</span><span>Tæt på omlægning</span>
		</div>
	</div>
</div>

</div>

错误：<tspan>属性dy：预期长度“ NaN”-Raphael.js

2 个答案: