1. 首頁
  2. 問答
  3. D3.js測量儀看起來像Telerik徑向測量儀

D3.js測量儀看起來像Telerik徑向測量儀

2013-12-19 37 views
2

您好，我需要幫助在測量儀內添加灰色（小和大）刻度線以更精確地捕捉針的位置。此外，如果您有任何想法，我們可以如何將文字放入主要畢業線。D3.js測量儀看起來像Telerik徑向測量儀

對於我的樣本，我需要7個主要的畢業生劃分10次分離（看起來完全像Telerik測量儀）。

這是我實現：http://jsfiddle.net/8svg5/

<html> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <div> 
     <a id="myTooltip" title="This is my message"></a> 
     <div id="svgTarget"></div> 
    </div> 
     <script> 
     $(function() { 

      var gaugeRanges = [ 
       { 
        From: 1.5, 
        To: 2.5, 
        Color: "#8dcb2a" 
       }, { 
        From: 2.5, 
        To: 3.5, 
        Color: "#ffc700" 
       }, { 
        From: 3.5, 
        To: 4.5, 
        Color: "#ff7a00" 
       }, 
       { 
        From: 4.5, 
        To: 6, 
        Color: "#c20000" 
       }]; 

      $("#svgTarget").mttD3Gauge({ data: gaugeRanges }); 

     }); 
    </script> 
</body> 
</html> 
(function ($) { 
    $.fn.mttD3Gauge = function (options) { 
     var settings = $.extend({ 
      width: 300, 
      innerRadius: 130, 
      outterRadius: 145, 
      data: [] 
     }, options); 

     this.create = function() { 
      this.html("<svg class='mtt-svgClock' width='" + settings.width + "' height='" + settings.width + "'></svg>"); 
      var maxLimit = 0; 
      var minLimit = 9999999; 
      var d3DataSource = []; 
      var d3TickSource = []; 
      //Data Genration 
      $.each(settings.data, function (index, value) { 
       d3DataSource.push([value.From, value.To, value.Color]); 
       if (value.To > maxLimit) maxLimit = value.To; 
       if (value.From < minLimit) minLimit = value.From; 
      }); 

      if (minLimit > 0) { 
       d3DataSource.push([0, minLimit, "#d7d7d7"]); 
      } 

      var pi = Math.PI; 

      //Control Genration 
      var vis = d3.select(this.selector + " .mtt-svgClock"); 
      var translate = "translate(" + settings.width/2 + "," + settings.width/2 + ")"; 
      var cScale = d3.scale.linear().domain([0, maxLimit]).range([-120 * (pi/180), 120 * (pi/180)]); 
      var arc = d3.svg.arc() 
       .innerRadius(settings.innerRadius) 
       .outerRadius(settings.outterRadius) 
       .startAngle(function (d) { return cScale(d[0]); }) 
       .endAngle(function (d) { return cScale(d[1]); }); 



      var tickArc = d3.svg.arc() 
       .innerRadius(settings.innerRadius - 20) 
       .outerRadius(settings.innerRadius - 2) 
       .startAngle(function (d) { return cScale(d[0]); }) 
       .endAngle(function (d) { return cScale(d[1]); }); 

      for (var i = 0; i < 10; i++) { 
       var point = (i * maxLimit)/10.0; 
       d3TickSource.push([point, point +1, "#d7d7d7"]); 
      } 

      vis.selectAll("path") 
       .data(d3DataSource) 
       .enter() 
       .append("path") 
       .attr("d", arc) 
       .style("fill", function (d) { return d[2]; }) 
       .attr("transform", translate); 

      return this; 
     }; 

     return this.create(); 
    }; 

}(jQuery)); 

enter code here

這裏是我想要實現與D3.js http://demos.telerik.com/aspnet-ajax/gauge/examples/types/radialgauge/defaultcs.aspx?#qsf-demo-source

任何幫助，將不勝感激頁面的鏈接！

來源

2013-12-19 user3119630

回答

0

我終於找到添加畢業，隨意使用此代碼

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="Scripts/jquery-1.9.1.js"></script> 
    <script src="Scripts/html5shiv.js"></script> 
    <script src="Scripts/d3.v3.min.js"></script> 
    <script src="Scripts/mtt-D3Gauge.js"></script> 
</head> 

<body> 
    <div> 
     <a id="myTooltip" title="This is my message"></a> 
     <div id="svgTarget"></div> 

    </div> 
    <script> 
     $(function() { 

      var gaugeRanges = [ 
       { 
        From: 1.5, 
        To: 2.5, 
        Color: "#8dcb2a" 
       }, { 
        From: 2.5, 
        To: 3.5, 
        Color: "#ffc700" 
       }, { 
        From: 3.5, 
        To: 4.5, 
        Color: "#ff7a00" 
       }, 
       { 
        From: 4.5, 
        To: 6, 
        Color: "#c20000" 
       }]; 

      $("#svgTarget").mttD3Gauge({ data: gaugeRanges }); 

     }); 


    </script> 
</body> 
</html> 

(function ($) { 
    $.fn.mttD3Gauge = function (options) { 
     var vis; 

     var settings = $.extend({ 
      width: 300, 
      innerRadius: 130, 
      outterRadius: 145, 
      majorGraduations: 6, 
      minorGraduations: 10, 
      majorGraduationLenght: 16, 
      minorGraduationLenght: 10, 
      majorGraduationMarginTop: 7, 
      majorGraduationColor: "rgb(234,234,234)", 
      minorGraduationColor:"rgb(234,234,234)", 
      data: [] 
     }, options); 

     this.create = function() { 
      this.html("<svg class='mtt-svgClock' width='" + settings.width + "' height='" + settings.width + "'></svg>"); 
      var maxLimit = 0; 
      var minLimit = 9999999; 
      var d3DataSource = []; 

      //Data Genration 
      $.each(settings.data, function (index, value) { 
       d3DataSource.push([value.From, value.To, value.Color]); 
       if (value.To > maxLimit) maxLimit = value.To; 
       if (value.From < minLimit) minLimit = value.From; 
      }); 

      if (minLimit > 0) { 
       d3DataSource.push([0, minLimit, "#d7d7d7"]); 
      } 
      //Render Gauge Color Area 
      vis = d3.select(this.selector + " .mtt-svgClock"); 
      var translate = "translate(" + settings.width/2 + "," + settings.width/2 + ")"; 
      var cScale = d3.scale.linear().domain([0, maxLimit]).range([-120 * (Math.PI/180), 120 * (Math.PI/180)]); 
      var arc = d3.svg.arc() 
       .innerRadius(settings.innerRadius) 
       .outerRadius(settings.outterRadius) 
       .startAngle(function (d) { return cScale(d[0]); }) 
       .endAngle(function (d) { return cScale(d[1]); }); 
      vis.selectAll("path") 
       .data(d3DataSource) 
       .enter() 
       .append("path") 
       .attr("d", arc) 
       .style("fill", function (d) { return d[2]; }) 
       .attr("transform", translate); 

      renderMajorGraduations(); 

      return this; 
     }; 

     var renderMinorGraduations = function (majorGraduationsAngles, indexMajor) { 
      var graduationsAngles = []; 

      if (indexMajor > 0) { 
       var minScale = majorGraduationsAngles[indexMajor - 1]; 
       var maxScale = majorGraduationsAngles[indexMajor]; 
       var scaleRange = maxScale - minScale; 

       for (var i = 1; i < settings.minorGraduations; i++) { 
        var scaleValue = minScale + i * scaleRange/settings.minorGraduations; 
        graduationsAngles.push(scaleValue); 
       } 

       var xCenter = settings.width/2; 
       var yCenter = settings.width/2; 
       //Render Minor Graduations 
       $.each(graduationsAngles, function (indexMinor, value) { 
        var cos1Adj = Math.round(Math.cos((90 - value) * Math.PI/180) * (settings.innerRadius - settings.majorGraduationMarginTop - settings.minorGraduationLenght)); 
        var sin1Adj = Math.round(Math.sin((90 - value) * Math.PI/180) * (settings.innerRadius - settings.majorGraduationMarginTop - settings.minorGraduationLenght)); 
        var cos2Adj = Math.round(Math.cos((90 - value) * Math.PI/180) * (settings.innerRadius - settings.majorGraduationMarginTop)); 
        var sin2Adj = Math.round(Math.sin((90 - value) * Math.PI/180) * (settings.innerRadius - settings.majorGraduationMarginTop)); 
        var x1 = xCenter + cos1Adj; 
        var y1 = yCenter + sin1Adj * -1; 
        var x2 = xCenter + cos2Adj; 
        var y2 = yCenter + sin2Adj * -1; 
        vis.append("svg:line") 
        .attr("x1", x1) 
        .attr("y1", y1) 
        .attr("x2", x2) 
        .attr("y2", y2) 
        .style("stroke", settings.majorGraduationColor); 
       }); 
      } 
     }; 

     var renderMajorGraduations = function() { 
      var scaleRange = 240; 
      var minScale = -120; 
      var graduationsAngles = []; 
      for (var i = 0; i <= settings.majorGraduations; i++) { 
       var scaleValue = minScale + i * scaleRange/settings.majorGraduations; 
       graduationsAngles.push(scaleValue); 
      } 
      var xCenter = settings.width/2; 
      var yCenter = settings.width/2; 
      //Render Major Graduations 
      $.each(graduationsAngles, function (index, value) { 
       var cos1Adj = Math.round(Math.cos((90 - value) * Math.PI/180) * (settings.innerRadius - settings.majorGraduationMarginTop - settings.majorGraduationLenght)); 
       var sin1Adj = Math.round(Math.sin((90 - value) * Math.PI/180) * (settings.innerRadius - settings.majorGraduationMarginTop - settings.majorGraduationLenght)); 
       var cos2Adj = Math.round(Math.cos((90 - value) * Math.PI/180) * (settings.innerRadius - settings.majorGraduationMarginTop)); 
       var sin2Adj = Math.round(Math.sin((90 - value) * Math.PI/180) * (settings.innerRadius - settings.majorGraduationMarginTop)); 
       var x1 = xCenter + cos1Adj; 
       var y1 = yCenter + sin1Adj * -1; 
       var x2 = xCenter + cos2Adj; 
       var y2 = yCenter + sin2Adj * -1; 
       vis.append("svg:line") 
       .attr("x1", x1) 
       .attr("y1", y1) 
       .attr("x2", x2) 
       .attr("y2", y2) 
       .style("stroke", settings.majorGraduationColor); 
       renderMinorGraduations(graduationsAngles, index); 
      }); 
     }; 

     return this.create(); 
    }; 

}(jQuery));

來源

2013-12-21 18:51:46 user3119630

相關問題

 相關問題