javascript - d3 圆环图与可拖动的外径

Question

我正在尝试在每个楔形处制作一个半径可变的圆环图。每个楔子都应该是可拖动的，以改变这个楔子的宽度(宽度意味着外半径)。
但是我不知道如何实现这个拖动功能。有人能帮我吗？

这是我的代码:

var width = 760,
    height = 550;

var innerradius = 200;

var color = d3.scale.category20b();     

var cScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);



var dataset = [
      { label: 'Abulia', count: 10, start: 0, end: 10, radius: 10 }, 
      { label: 'Betelgeuse', count: 20, start: 10, end: 20, radius: 20 },
      { label: 'Cantaloupe', count: 30, start: 30, end: 60, radius: 20 },
      { label: 'Dijkstra', count: 40, start: 60, end: 100, radius: 20 }
];



var svg = d3.select('#content').append('svg')
            .attr('width', width)
            .attr('height', height)
            .append('g')
            .attr('transform', 'translate(' + (width / 2) +  ',' + (height / 2) + ')');


var arc = d3.svg.arc()
      .innerRadius(innerradius)             
      .outerRadius(function(d){return d.radius + innerradius;})
      .startAngle(function(d){return cScale(d.start);}) 
      .endAngle(function(d){return cScale(d.end);});

var path = svg.selectAll('path')
      .data(dataset)
      .enter()
      .append('path')
      .attr('d', arc)
      .style("fill", function(d){return color(d.label);});   

var drag = d3.behavior.drag()
             .on('drag', function() {

                    //don't know what to do

                                    }) 

Answer 1

这是我的解决方案。

             .on('drag', function(d) {
             if (d3.event.sourceEvent.button == 0)
                 d.radius += Math.sqrt(d3.event.dx * d3.event.dx + d3.event.dy * d3.event.dy);
             else if (d3.event.sourceEvent.button == 2){
                 d.radius -= Math.sqrt(d3.event.dx * d3.event.dx + d3.event.dy * d3.event.dy);
                 d.radius = Math.max (d.radius, 1);
             }
                path.each(function (d2){
                    if (d == d2){
                        d3.select(this).attr('d', arc);
                    }
                });
                                });

有了这个，左键单击并拖动将增加楔形的半径，而右键单击并拖动将减小它。如果您选择保留此行为，那么您还需要覆盖默认上下文菜单以防止它弹出。

但是，如果您希望能够通过左键单击来扩展和收缩，事情就会变得有点复杂。这是因为该方法依赖于 dx和 dy drag 的属性事件，无论弧在哪里，都将是相同的方向。要使用单个鼠标按钮使用它，您必须计算 dx和 dy相对于弧所面对的方向(可能需要为此深入研究一点三 Angular 学)。