Javascript 多个可拖动图表d3.js

我需要使用d3.js和JSON数据显示多个可拖动的圆环图。我可以通过调用函数两次来显示多个图表，但只有第一个图表会被拖动。或者，我尝试使用一个二维数组来显示多个图表，但没有一个会拖动。谢谢你的帮助。代码是：

function showChart() {

    $.getJSON('data.json', function (data) {

    var newData = [];
    for (var key in data.items[0]) {
        var thisData = {
                "Name": key,
                "Value": data.items[0][key]
        }
        newData.push(thisData)  
    }

    var width = 160;
    var height = 160;
    var outradius = Math.min(width, height) / 2;
    var inradius = outradius / 1.25;
    var boxWidth = 600;  
    var boxHeight = 400;
    var color = d3.scale.category10();

    var svg = d3.select('#Chart')
        .append('svg')
        .attr('class', 'svg')
        .attr('width', 400)
        .attr('height', 400);

    var arc = d3.svg.arc()
        .outerRadius(outradius)
        .innerRadius(inradius);

    var pie = d3.layout.pie()
        .value(function(d, i) {
        return d.Value;
        })
        .sort(null);

    var path = svg.selectAll('path')
        .data(pie(newData))
        .enter()
        .append('path')
        .attr('d', arc)
        .attr('fill', function(d, i) {
                return color(d.data.Name);
        })

        .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended))

        .attr('transform', 'translate(' + (width / 2) + ',' +   (height / 2) + ')');

    var path2 = d3.select('svg').data(pie(newData))
        .enter().append('path')
        .attr('d', arc)
        .attr('fill', function(d, i) {
            return color(d.data.Name);
        })

        .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended))
        .attr('transform', 'translate(' + (width / 2) + ',' +   (height / 2) +     ')');
    function dragstarted(d) {
        //... 
    }
    function dragged(d) {   
        var x = d3.event.x;
        var y = d3.event.y;
        d3.select('svg')
            .attr('transform', 'translate(' + x + ',' +     y + ')');
    }

    function dragended(d) {
        //...
    }   

    });
}

---

谢谢。

我可以推荐使用gridstack.js作为可拖动图表的网格，例如在Grafana中。

您可以将代码转换为具有json值的工作文件吗？您想只拖动路径（甜甜圈）还是图表小部件（例如，容器SVG）？只拖动甜甜圈。最好在svg中显示几个甜甜圈，然后能够在容器中拖动它们。