您好,我需要帮助在测量仪内添加灰色(小和大)刻度线以更精确地捕捉针的位置。此外,如果您有任何想法,我们可以如何将文字放入主要毕业线。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
任何帮助,将不胜感激页面的链接!