2

这次我被困在一个圆形轴上进行仪表读数。我想沿着仪表的圆形路径进行读数和刻度（就像车速表一样）：

在此处输入图像描述

但是，我没有得到确切的想法或解决方案。另外，具体来说，我只想用 D3.js 来做。

我已经创建了带有一些参考的仪表，并试图从中提取一些读数，但我觉得我所做的并不是最合适的方法。

请指导我完成这个。这是我的代码：-

<!DOCTYPE html>
<meta charset="utf-8">
<title>Speedo-meter</title>
<script src="jquery-1.9.1.min.js"></script>
<style>

 svg
 {
  margin-left: 30px;
  margin-top: 30px;
  border: 1px solid #ccc;
 }

 </style>
 <body>
 <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 <script>

 var data = {
        "title": "Meter Gauge",
        "value": 50,
        "maxValue": 200
    };

 startAngle = 90, endAngle = 270, innerRad=175 , outerRad=185 ;

 var svg = d3.selectAll("body").append("svg")
            .attr("width", 500)
            .attr("height", 500);

  var arc = d3.svg.arc()
        .innerRadius(innerRad)
        .outerRadius(outerRad)
        .startAngle(90 * (Math.PI/180))
        .endAngle(270 * (Math.PI/180));

  var title = svg.append("text")
            .attr("x", 50)
            .attr("y", 50)
            .style("text-anchor", "start")
            .text("Click on the meter line to turn the needle");

  var plot = svg.append("g")
            .attr("class", "arc")
            .attr("transform", "translate(100 , 150 )");

  var gauge = plot.append("path")
            .attr("d", arc)
            .attr("class", "gauge")
            .attr("fill", "#ddd")
            .attr("stroke", "#000")
            .attr("transform", "translate(150,130) rotate(180)")
            .on("click", turnNeedle);

  var needle = svg.append("g")
            .attr("class", "needle")
            .attr("transform", "translate( 100 , 110 )")
            .append("path")
            .attr("class", "tri")
            .attr("d", "M" + (300/2 + 3) + " " + (120 + 10) + " L" + 300/2 + " 0 L" +                                         (300/2 - 3) + " " + (120 + 10) + " C" + (300/2 - 3) + " " + (120 + 20) + " " + (300/2 + 3) + " " + (120 + 20) + " " + (300/2 + 3) + " " + (120 + 10) + " Z")
            .attr("transform", "rotate(-100, " + 300/2 + "," + (120 + 10) + ")");

    function turnNeedle()
    {
      needle.transition()
            .duration(2000)
            .attrTween("transform", tween);

     //console.log(d3.select(".needle").attr("cx"));
     function tween(d, i, a) {
        return d3.interpolateString("rotate(-100, 150, 130)", "rotate(100, 150, 130)");
     }
    }

    var Speeds = data.maxValue/20;

    var divisions = ((endAngle-startAngle))/Speeds ;
    console.log("divisions=>"+divisions);

    j=0;
    endAngle1 = startAngle+ 20;
    startAngle = 72;


    for(i=0;i<=10;i++)
    {
       endAngle = startAngle+ divisions;
       newArc = d3.svg.arc()
                .innerRadius(innerRad - 10)
                .outerRadius(outerRad)
                .startAngle((startAngle+=divisions) * (Math.PI/180))
                .endAngle(endAngle * (Math.PI/180));


       var gauge = plot.append("path")
            .attr("d",newArc)
            .attr("class", "gauge")
            .attr("id", "gauge"+i)
            .attr("fill", "#ddd")
            .attr("stroke", "#000")
            .attr("transform", "translate(150,130) rotate(180)")
            .on("click", turnNeedle);

            var text = plot.append("text")
                        .style("font-size",14)
                        .style("fill","#000")
                        .style("text-anchor", "start")
                        .attr("x", -165 + 6)
                        .attr("dy",".35em")
                        .append("textPath")
                        .attr("xlink:href","#gauge"+i)
                        .attr("startOffset",5)
                        .text(Speeds*i);
            }
     </script>
4

0 回答 0