javascript - 未根据旋转角度正确计算秒数

Question

jsFiddle：演示

根据下面的小提琴或片段，您可以看到我有一个包含 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>

标签： javascriptd3.jsdata-visualization