Javascript 如何在d3.js中创建仪表指针代码_Javascript_D3.js

Javascript 如何在d3.js中创建仪表指针代码

javascript d3.js

Javascript 如何在d3.js中创建仪表指针代码,javascript,d3.js,Javascript,D3.js,如何使用诸如D3.js之类的javascript库创建测速针。我在D3.js中提供了测速针的简单实现。期待您的评论和赞赏，如果你喜欢 JS-Bin svg { 左边距：30px；边缘顶部：30px；边框：1px实心#ccc； } var svg=d3.selectAll（“body”）.append（“svg”） .attr（“宽度”，300） .attr（“高度”，300）； //调整路径内外半径 var arc=d3.svg.arc（） .内半径（30） .外层（120） .sta

如何使用诸如D3.js之类的javascript库创建测速针。

我在D3.js中提供了测速针的简单实现。期待您的评论和赞赏，如果你喜欢


JS-Bin
svg
{
左边距：30px；
边缘顶部：30px；
边框：1px实心#ccc；
}
var svg=d3.selectAll（“body”）.append（“svg”）
.attr（“宽度”，300）
.attr（“高度”，300）；
//调整路径内外半径
var arc=d3.svg.arc（）
.内半径（30）
.外层（120）
.startAngle（120*（数学PI/180））
.端角（240*（数学PI/180））；
变量绘图=svg
.附加（“g”）
.attr（“类”、“弧”）；
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”）
。打开（“点击”，旋转针）；
var针=svg
.附加（“g”）
.attr（“类”、“针”）
.attr（“转换”、“转换（0，0）”）
.append（“路径”）
.attr（“类”、“三类”）
.attr（“d”、“M”+（300/2+2）++”+（120+10）+“L”+300/2+“0L”+（300/2-3）++”（120+10）+“C”+（300/2-3）++“（120+20）++”+（300/2+3）++“（120+20）++”+（300/2+3）+（120+10）+“Z”）
.attr（“变换”、“旋转（-60）、+300/2+”、“+（120+10）+”）；
函数turnNeedle（）
{
针
.transition（）
.期限（2000年）
.attrTween（“转换”，tween）；
函数吐温（d，i，a）{
控制台日志（d）；
控制台日志（i）；
控制台日志（a）；
返回d3.插值字符串（“旋转（-60150130）”，“旋转（60150130）”；
}
}

在10秒内提出问题和自问的原因是什么？如果您想分享您的技能，请开始您的博客或为适当的网站撰写文章和说明。因此，这是一个提出你面临困难的问题并寻找有用答案的地方，这种方法将在将来使用。因此，我们这里有-1）确定有不止一种方法可以达到您描述的目标2）如果您已经知道答案，则没有意义提出问题3）您的帖子可能与现有的和已解决的帖子重复-我发现此实现看起来不错

<!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>