Javascript d3.js-读数以米计，如d3.js中的圆轴
这一次，我被困在一个圆形轴上，无法读取仪表读数。我想沿着米计的圆形路径进行读数和滴答声（就像速度计）： 然而，我没有得到确切的想法或解决方案。另外，更具体地说，我只想使用D3.js 我已经用一些参考资料创建了仪表，并试图从仪表中提取一些读数，但我不认为我所做的是最合适的方法 请引导我通过这个。这是我的密码：-Javascript d3.js-读数以米计，如d3.js中的圆轴,javascript,d3.js,gauge,Javascript,D3.js,Gauge,这一次，我被困在一个圆形轴上，无法读取仪表读数。我想沿着米计的圆形路径进行读数和滴答声（就像速度计）： 然而，我没有得到确切的想法或解决方案。另外，更具体地说，我只想使用D3.js 我已经用一些参考资料创建了仪表，并试图从仪表中提取一些读数，但我不认为我所做的是最合适的方法 请引导我通过这个。这是我的密码：- <!DOCTYPE html> <meta charset="utf-8"> <title>Speedo-meter</title> &l
<!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>
速比表
svg
{
左边距：30px；
边缘顶部：30px；
边框：1px实心#ccc；
}
风险值数据={
“标题”：“米规”，
“价值”：50，
“最大值”：200
};
startAngle=90，endAngle=270，innerRad=175，outerRad=185；
var svg=d3.selectAll（“body”）.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var arc=d3.svg.arc（）
.innerRadius（innerRad）
.外层（外层）
.startAngle（90*（数学PI/180））
.端角（270*（数学PI/180））；
var title=svg.append（“文本”）
.attr（“x”，50）
.attr（“y”，50）
.style（“文本锚定”、“开始”）
.text（“点击仪表线转动指针”）；
var plot=svg.append（“g”）
.attr（“类”、“弧”）
.attr（“转换”、“翻译（100150）”）；
变量量表=绘图。追加（“路径”）
.attr（“d”，弧）
.attr（“等级”、“量规”）
.attr（“填充”、“ddd”）
.attr（“笔划”，“千”）
.attr（“变换”、“平移（150130）旋转（180）”）
。打开（“点击”，旋转针）；
var针=svg.append（“g”）
.attr（“类”、“针”）
.attr（“转换”、“翻译（100110）”）
.append（“路径”）
.attr（“类”、“三类”）
.attr（“d”、“M”+（300/2+3）++”+（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（“变换”、“旋转（-100）、+300/2+”、“+（120+10）+”）；
函数turnNeedle（）
{
1.transition（）
.期限（2000年）
.attrTween（“转换”，tween）；
//console.log（d3.select（“.needle”）.attr（“cx”）；
函数吐温（d，i，a）{
返回d3.插值字符串（“旋转（-100150130）”，“旋转（100150130）”；
}
}
var速度=data.maxValue/20；
var分割=（（端角星形缠绕））/速度；
console.log（“divisions=>”+divisions）；
j=0；
端角1=星形缠结+20；
startAngle=72；
对于（i=0；这里有一些量规的例子，可能会有帮助。@pravin:先生，我想我在第一行提到了圆轴。要用记号和读数绘制圆轴，这是我的问题。@user2339182:哦！我的错！对不起，这是巧合，我在你的页面中发布了注释，而不是其他一些。当你有很多标签时会发生这种情况“这些都是我在这篇文章中提到的圆形轴上的记号。如果有任何帮助，我们将不胜感激。我根据msqr制作了一个仪表元件，你可以看到。”。