d3.jsのJSONのコードダイアグラムデータを更新

Question

私たちのネットワークのIP間でnetflowのD3コードを作成して描画する次の2つの関数があります。

Functon 1（和音ダイアグラムを作成する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（図を描く1）

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 divを（containerID）.emtpy（）;で消去します。 createChords（）を呼び出すことができますが、必要なのは、jsonURLからの新しいajaxリクエストデータで、アニメーショントランザクションをオプションで実行してデータを更新することです。

私はここで解決策を試しましたhttp://bl.ocks.org/d3noob/6bd13f974d6516f3e491運がありません。

ありがとうございます。

Answer 1

毎回、データに依存してSVGが新たに作成されます。あなたが作成する前に、コード内で

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

をSVGを削除する必要がありますので、私は

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

Answer 2

更新機能を記述したり、drawChordsを更新してデータとグラフを更新し、Ajax関数から呼び出すことができます。ここには簡単なexampleがあります。これはあなたが指定した例の拡張です。このようなものを構築してくださいfunction。グラフを更新するd3.jsの例はたくさんあります。