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