Как создать код иглы в d3.js

-2

Как мы можем создать иглу с указателем скорости, используя библиотеку javascript, такую как D3.js.Как создать код иглы в d3.js

источник

2014-12-11 akki_java

чем причина поднять вопрос и спросить себя через 10 секунд? – Evgeniy

Если вы хотите поделиться своими навыками, начните свой блог или напишите статьи и заметки для соответствующих веб-сайтов. SO - это место для поднятия вопросов, с которыми вы сталкиваетесь, и искать полезный ответ таким образом, который будет использоваться в будущем. Итак, что у нас здесь - 1) Конечно, есть более одного способа достичь цели, которую вы описали. 2) Нет смысла поднимать вопрос, если вы уже знаете ответ. 3) Ваше сообщение может быть возможным дублированием существующего и уже разрешенного - http://stackoverflow.com/questions/14421499/d3js-gauge-graph – Evgeniy

Я нашел эту реализацию [http://bl.ocks.org/msqr/3202712](http://bl.ocks.org/msqr/3202712) Выглядит неплохо – Braulio

Я обеспечил и легкую реализацию калибровочной иглы в D3.js. Ждем ваших комментариев и оценки, если хотите.

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>

источник

2014-12-11 07:21:07

Как создать код иглы в d3.js

ответ

Смежные вопросы