javascript - 从 d3.js 中的 JSON 更新和弦图数据

Question

我有以下两个函数，可以创建并绘制我们网络 IP 之间网络流的 D3 和弦图。

函数 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;
    });
}

}

最后，我调用该函数来使用以下代码段创建不同的 netflow 数据图表:

$(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)