从d3.js中的JSON更新chord图数据

Question

我有以下两个函数，它创建并绘制了我们网络IP之间网络流量的D3 chord图。

函子1(创建和弦图)

function createChords(jsonURL, containerID, tooltipID, circleID, svgID, valueFormat = 'none'){
    d3.json(jsonURL, function (error, data){
        if(data.length > 2){
            var mpr = chordMpr(data);
            mpr.addValuesToMap('from').setFilter(function (row, a, b){
                return (row.from === a.name && row.to === b.name)
            }).setAccessor(function (recs, a, b){
                if (!recs[0]) return 0;
                return +recs[0].value;
            });
            drawChords(mpr.getMatrix(), mpr.getMap(), containerID, tooltipID, circleID, svgID, valueFormat);
        };
    });
};

函数2(绘制图表的函数)

function drawChords(matrix, mmap, containerID, tooltipID, circleID, svgID, valueFormat){
var w = 980, h = 800, r1 = h / 2, r0 = r1 - 45;
var fill = d3.scale.category10();
var chord = d3.layout.chord()
    .padding(.00)
    .sortSubgroups(d3.descending)
    .sortChords(d3.descending);
var arc = d3.svg.arc()
    .innerRadius(r0)
    .outerRadius(r0 + 20);

var svg = d3.select("#"+containerID)
    .append("svg")
    .attr("id", svgID)
    .attr("class", "chord-svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("viewBox", "0 0 "+w+" "+h)
    .attr("preserveAspectRatio", "xMidYMid meet")
    .append("svg:g")
    .attr("id", circleID)
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

svg.append(circleID).attr("r", r0 + 20);
var rdr = chordRdr(matrix, mmap);

chord.matrix(matrix);

var g = svg.selectAll("g.chord-group")
    .data(chord.groups())
    .enter().append("svg:g")
    .attr("class", "chord-group")
    .on("mouseover", mouseover)
    .on("mouseout", function (d){
        d3.select("#"+tooltipID)
        .style("visibility", "hidden")
    });

g.append("svg:path")
    .style("stroke", "none")
    .style("fill", function(d) { return fill(d.index); })
    .attr("d", arc);
    g.append("svg:text")
    .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
    .attr("dy", ".35em")
    .attr("text-anchor", function(d){ return d.angle > Math.PI ? "end" : null; })
    .attr("transform", function(d){return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"+"translate(" + (r0 + 26) + ")"+(d.angle > Math.PI ? "rotate(180)" : "");})
    .text(function(d){if(d.endAngle - d.startAngle<2*Math.PI/180){return ""}else{ return rdr(d).gname;}});

var chordPaths = svg.selectAll("path.chord-diagram")
    .data(chord.chords())
    .enter().append("svg:path")
    .attr("class", "chord-diagram")
    .style("stroke", function(d) { return d3.rgb(fill(d.target.index)).darker(); })
    .style("fill", function(d) { return fill(d.target.index); })
    .attr("d", d3.svg.chord().radius(r0))
    .on("mouseover", function (d) {
        d3.select("#"+tooltipID)
            .style("visibility", "visible")
            .html(chordTip(rdr(d)))
            .style("top", function(){ return (d3.event.pageY)+"px"})
            .style("left", function(){ return (d3.event.pageX + 10)+"px";})
    })
    .on("mouseout", function(d){d3.select("#"+tooltipID).style("visibility", "hidden")});

function chordTip(d){
    var p = d3.format(".0%"), q = d3.format("0d");
    if(valueFormat == 'none'){
        return q(d.svalue) + " de <b>" + d.sname + "</b> hacia " + "<b>"+d.tname+"</b>";
    } else if(valueFormat == 'bytes'){
        return bytes_to_human(q(d.svalue)) + " de <b>" + d.sname + "</b> hacia " + "<b>"+d.tname+"</b>";
    } else if(valueFormat == 'abbreviate'){
        return k_formatter(q(d.svalue)) + " pkts de <b>" + d.sname + "</b> hacia " + "<b>"+d.tname+"</b>";
    } else {
        return q(d.svalue) + " de <b>" + d.sname + "</b> hacia " + "<b>"+d.tname+"</b>";
    }
};

function groupTip (d) {
    return d.gname;
};

function mouseover(d, i) {
    d3.select("#"+tooltipID)
        .style("visibility", "visible")
        .html(groupTip(rdr(d)))
        .style("top", function () { return (d3.event.pageY - 80)+"px"})
        .style("left", function () { return (d3.event.pageX - 130)+"px";});

    chordPaths.classed("chord-fade", function(p) {
        return p.source.index != i && p.target.index != i;
    });
}

}

最后，我调用这个函数来用这个片段创建不同的网络流数据图表：

$(document).ready(function(){
createChords(
    '/ajax/charts/netflow/realtime/records/packets',
    'records-diagram-packets',
    'records-tooltip-packets',
    'records-circle-packets',
    'records-svg-packets',
    'abbreviate'
);
});

实际上，要更新图表，我需要使用( containerID ).emtpy()清除containerID div，并召回createChords()，但我需要的是使用来自jsonURL的新ajax请求数据(可选动画事务)来更新数据。

我在这里尝试了这个解决方案，http://bl.ocks.org/d3noob/6bd13f974d6516f3e491没有任何运气。

提前谢谢你。

Answer 1

每次都依赖于数据SVG是新创建的。因此，您必须在创建之前删除SVG。

d3.select("Your Id Name or Your Class Name").select("svg").remove();

在您的代码中，我更改了以下内容

d3.select("#"+containerID).select("svg").remove();
var svg = d3.select("#"+containerID)

Answer 2

您可以编写更新函数或更新drawChords以更新数据和图表，并从Ajax函数调用它。下面是一个简单的示例，它是您提供的示例的扩展。构建类似于这个函数的东西。有许多d3.js来更新图形的例子。