jsFiddle:demo
按照下面的小提琴或摘录,您可以看到我有一个包含5个小圆圈的大圆圈。在下图中,我给了所有圈子数字。现在,当您尝试旋转小圆圈1时,它处于摆弄状态,它可以正常工作并以正确的方式增加数字(显示在左下方)。
现在尝试将其他圆圈一一旋转(2、3、4、5),您将看到数字显示的负值不正确,旋转时应始终显示正确的秒数。
我已经在代码中更新了线性比例尺:
var timeScale = d3.scale.linear().range([0, 360]).domain([0, 60]);
基于每个圆的开始位置,但不起作用。
有人可以帮我解决这个问题吗?
var values = [
{value: 33, label: 'A'},
{value: 33, label: 'B'},
{value: 33, label: 'C'},
{value: 33, label: 'D'},
{value: 33, label: 'E'}
];
var total = 0;
var dragging = null;
var circleTransform;
var circleCoordinates;
values.forEach(function (d) {
d.absoluteValue = total;
total += d.value;
});
var height = 300, width = 300, margin = {top: 20, left: 20, bottom: 20, right: 20};
var radius = (height - margin.top - margin.bottom) / 2;
var parent = d3.select('.ring-input').append('svg')
.attr({
height: height,
width: width
}).append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var angularScale = d3.scale.linear().range([0, 360]).domain([0, total]);
var timeScale = d3.scale.linear().range([0, 360]).domain([0, 60]);
var ring = parent.append('g').attr('id', 'rim').attr('transform', 'translate(' + radius + ',' + radius + ')');
ring.append('circle').attr({
r: radius,
'class': 'ring'
})
var handles = parent.append('g').attr('id', 'handles').attr('transform', 'translate(' + radius + ',' + radius + ')');
var drag = d3.behavior.drag()
.origin(function (d) {
return d;
})
.on("dragstart", function () {
circleTransform = d3.transform(d3.select(this).attr("transform"));
circleCoordinates = circleTransform.translate;
})
.on("drag", dragmove)
.on('dragend', function () {
d3.select(this)
.classed('active', false)
.attr({
transform: circleTransform
});
document.getElementById('estimated-time').innerHTML = 0;
});
//position the handles based on the input values
function drawHandles() {
var join = handles.selectAll('circle').data(values);
join.enter()
.append('circle').attr({
r: 10,
'class': 'handle'
}).on("mouseover", function () {
d3.select(this).classed('active', true);
})
.on("mouseout", function () {
d3.select(this).classed('active', false);
})
.call(drag);
join.attr({
transform: function (d) {
return 'rotate(' + angularScale(d.absoluteValue) + ') translate(' + radius + ',0)'
}
})
}
drawHandles();
function dragmove(d, i) {
d3.select(this).classed('active', true);
var coordinates = d3.mouse(parent.node());
var x = coordinates[0] - radius;
var y = coordinates[1] - radius;
var newAngle = Math.atan2(y, x) * 57.2957795;
if (newAngle < 0) {
newAngle = 360 + newAngle;
}
d.absoluteValue = angularScale.invert(newAngle);
var startAngle = Math.atan2(circleCoordinates[1], circleCoordinates[0]) * 57.2957795;
if (startAngle < 0) {
startAngle = 360 + startAngle;
}
timeScale.range([startAngle, startAngle + 360]);
document.getElementById('estimated-time').innerHTML = Math.round(timeScale.invert(newAngle));
//REDRAW HANDLES
drawHandles()
}
.handle {
fill: #FFF;
stroke: #000;
stroke-width: 4;
cursor: all-scroll;
}
.handle.active {
stroke: #F00;
}
.ring {
fill: none;
stroke: #000;
stroke-width: 4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="ring-input"></div>
<div id="estimated-time">0</div>