Question

我们如何使用诸如D3.js。

等javascript库创建速度计针

Answer 1

我在D3.js中提供并轻松实现了Gauge Needle。如果您愿意，期待您的评论和赞赏。

http://jsfiddle.net/akashtyagi40/u28n234k/

<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v2.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
svg
{
margin-left: 30px;
margin-top: 30px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="D3line"></div>
<script id="jsbin-javascript">
var svg = d3.selectAll("body").append("svg")
.attr("width", 300)
.attr("height", 300);
//Path inner and outer radius is adjusted
var arc = d3.svg.arc()
.innerRadius(30)
.outerRadius(120)
.startAngle(120 * (Math.PI/180))
.endAngle(240 * (Math.PI/180));

var plot = svg
.append("g")
.attr("class", "arc");

var image = svg.append("svg:image")
.attr('x',50)
.attr('y',0)
.attr('width', 200)
.attr('height', 240)
.attr("xlink:href","file:///D:/ATC%20Project/D3%20poc/Gauge%20Needle%20POC's/gauge_skin.jpg")
.attr("id", "fillImage")
.on("click", turnNeedle);

var needle = svg
.append("g")
.attr("class", "needle")
.attr("transform", "translate( 0 , 0 )")
.append("path")
.attr("class", "tri")
.attr("d", "M" + (300/2 + 2) + " " + (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(-60, " + 300/2 + "," + (120 + 10) + ")");

function turnNeedle()
{
needle
.transition()
.duration(2000)
.attrTween("transform", tween);
function tween(d, i, a) {
console.log(d);
console.log(i);
console.log(a);
return d3.interpolateString("rotate(-60, 150, 130)", "rotate(60, 150, 130)");
}
}
</script>
 </body>
</html>

如何在d3.js中创建Gauge Needle代码

1 个答案: