javascript - 多个可拖动图表 d3.js

Question

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

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) {
        //...
    }   

    });
}

谢谢。

Answer 1

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