点击d3.js和弦更新矩阵

Question

我想更新点击数据。这是我的代码

function drawChordWithMatrix(matrix){
    var offset = Math.PI * (emptyStroke/(respondents + emptyStroke)) / 2;

//create a chord layout object and then call additional methods on the layout object to change the default settings
var chord = d3.layout.chord()
    .padding(.02)
    .sortSubgroups(d3.descending) //sort the chords inside an arc from high to low
    .sortChords(d3.descending) //which chord should be shown on top when chords cross. Now the biggest chord is at the bottom
    .matrix(matrix_T2_T3);

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .startAngle(startAngle)//startAngle and endAngle now include the offset in degrees
    .endAngle(endAngle);

var path = d3.svg.chord()
    .radius(innerRadius)
    .startAngle(startAngle) //startAngle and endAngle now include the offset in degrees
    .endAngle(endAngle);

var fill = d3.scale.ordinal()
    .domain(d3.range(Names.length))
    .range(["#C4C4C4","#C4C4C4","#C4C4C4","#EDC951","#CC333F","#00A0B0"]);

////////////////////////////////////////////////////////////
//////////////////// Draw outer Arcs ///////////////////////
////////////////////////////////////////////////////////////

//The group data objects are accessed by calling .groups() on the chord layout after the data matrix has been set
var g = wrapper.selectAll("g.group")
    .data(chord.groups)
    .enter().append("g")
    .attr("class", "group")
    .on("mouseover", fade(opacityLow))
    .on("mouseout", fade(opacityDefault));

g.append("path")
    .style("stroke", function(d,i) { return (Names[i] === '' ? "none" : (i > Names.length/2-1 ? "#00A1DE" : "#fad201")); })
    .style("fill", function(d,i) { return (Names[i] === '' ? "none" : (i > Names.length/2-1 ? "#00A1DE" : "#fad201")); })
    .style("pointer-events", function(d,i) { return (Names[i] === "" ? "none" : "auto"); })
    .attr("d", arc);

////////////////////////////////////////////////////////////
////////////////////// Append Names ////////////////////////
////////////////////////////////////////////////////////////

g.append("text")
    .each(function(d) { d.angle = ((d.startAngle + d.endAngle) / 2) + offset;})
    .attr("dy", ".35em")
    .attr("class", "titles")
    .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
    .attr("transform", function(d,i) { 
        var c = arc.centroid(d);
        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
        + "translate(" + (innerRadius + 55) + ")"
        + (d.angle > Math.PI ? "rotate(180)" : "")
    })
    .text(function(d,i) { return Names[i]; });

//+ "translate(" + (innerRadius + 55) + ")"

////////////////////////////////////////////////////////////
//////////////////// Draw inner chords /////////////////////
////////////////////////////////////////////////////////////

//var colors = ["#00A0B0","#CC333F","#EDC951"];
var chords = wrapper.selectAll("path.chord")
    .data(chord.chords)
    .enter().append("path")
    .attr("class", "chord")
    .style("stroke", "none")
    .style("fill", "#C4C4C4")
    //.style("fill", function(d,i) { return fill(d.target.index); })
    .style("opacity", function(d) { return (Names[d.source.index] === '' ? 0 : opacityDefault); }) //Make the dummy strokes have a zero opacity (invisible)
    .style("pointer-events", function(d,i) { return (Names[d.source.index] === '' ? "none" : "auto"); }) //Remove pointer events from dummy strokes
    .attr("d", path)
    .on("mouseover", fadeOnChord)
    .on("mouseout", fade(opacityDefault));      


////////////////////////////////////////////////////////////
///////////////////////// Tooltip //////////////////////////
////////////////////////////////////////////////////////////

//Arcs
g.append("title")   
    .text(function(d, i) {return Math.round(d.value) + " people in " + Names[i];});


//Chords
chords.append("title")
    .text(function(d) {
        return [Math.round(d.source.value), " people from ", Names[d.target.index], " to ", Names[d.source.index]].join(""); 
    });

g.groups()
.exit()
.remove()

}

问题在于我不知道如何删除现有图表并添加新图表。

我使用function drawChordWithMatrix(matrix)来创建和弦。我想要的只是删除当前的和弦，并在单击按钮时再次调用此功能。

这是我收到的错误：

  

TypeError：undefined不是对象（评估'g.groups.exit'）

https://jsfiddle.net/pfby4zjb/