D3レーダーチャートのデータ更新が機能しない

Question

ユーザーがドロップダウンメニューオプションを選択でき、データが更新されるD3レーダーチャートを描画しようとしています。しかし、最初に選択されたものが描画されますが、それ以外のものを選択するとデータは更新されません。 !!!!!!!!!!!!!!!!!! HERE

var width = 700, 
    height = 500, 
    barHeight = height/2 - 40; 

var color = d3.scale.ordinal() 
    .range(["#a50f15","#de2d26", "#fb6a4a","#fc9272", "#fcbba1"]); 

var tickValues = [2,4,6,8,10]; 

var svg = d3.select('#radial').append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 


    var data = pangolins[0]; 

    var numBars = data.data.length; 

    var radius = d3.scale.linear() 
     .domain([0,10]) 
     .range([0, barHeight]); 

    var line = d3.svg.line.radial() 
    .interpolate("linear-closed") 
    .radius(function(d) { return radius(d.count); }) 
    .angle(function(d,i) { return (i * 2 * Math.PI/numBars); }); 

    var area = d3.svg.area.radial() 
    .interpolate(line.interpolate()) 
    .innerRadius(radius(0)) 
    .outerRadius(line.radius()) 
    .angle(line.angle()); 

    tickValues.sort(function(a,b) { return b - a; }); 

    var tickPath = svg.selectAll(".tickPath") 
     .data(tickValues).enter() 
    .append("path") 
     .attr("class", "tickPath") 
     .attr("d", function(d) { 
     var tickArray = []; 
     for (i=0;i<numBars;i++) tickArray.push({count : d}); 
     return area(tickArray); 
     }) 
     .style("fill", function(d) { return color(d); }) 
     .style("stroke", function(d,i) { return (i === 0) ? "black" : "white"; }) 
     .style("stroke-width", function(d,i) { return (i === 0) ? "1px" : ".5px"; }); 

    var lines = svg.selectAll("line") 
     .data(data.data) 
    .enter().append("g") 
     .attr("class","lines"); 

    lines.append("line") 
    .attr("y2", - barHeight) 
    .style("stroke", "white") 
    .style("stroke-width",".5px") 
    .attr("transform", function(d, i) { return "rotate(" + (i * 360/numBars) + ")"; }); 

    lines.append("text") 
    .attr("class", "names") 
    .attr("x", function(d, i) { return (barHeight + 15) * Math.sin((i * 2 * Math.PI/numBars)); }) 
    .attr("y", function(d, i) { return -(barHeight + 15) * Math.cos((i * 2 * Math.PI/numBars)); }) 
    .attr("text-anchor", function(d,i) { 
    if (i===0 || i===numBars/2) { 
     return "middle"; 
     }else if (i <= numBars/2) { 
     return "begin"; 
     }else { 
     return "end"; 
     } 
    }) 
    .style("font-weight","bold") 
    .text(function(d) { return d.threat; }); 







$('#pangolinSelect').change(function() { 
     var selected = $("#pangolinSelect option:selected").text(); 
     console.log(selected); 
     var selected_d; 
     pangolins.forEach(function(d){ 
      if(selected ==d.id){ 
       selected_d = d; 
      } 
     }); 
     console.log("selected_d"); 
     console.log(selected_d); 
     changePangolin(selected_d); 

    }); 

// changePangolin(data); 

//問題：コードは以下の貼り付け、私は問題の一部をハイライト表示されます// //問題はこちら!!!!!!!!!!!!!!!!!! // //問題はこちら!!!!!!!!!!!!!!!!!!ここでは//

function changePangolin(newdata) { 

    console.log('change pangolin'); 
    console.log(newdata); 

    var t = d3.transition() 
     .duration(750); 

    // JOIN new data with old elements. 
    var layer = svg.selectAll(".layer") 
    .data([newdata]) 
    .enter() 
    .append("path") 
    .attr("class", "layer") 
    .transition(t) 
    .attr("d", function(d) { console.log(d); return area(d.data); }) 
    .attr("fill", "none") 
    .attr("stroke", "black") 
    .attr("stroke-width", "2px"); 


} 

作品初期選択のスクリーンショットですが、別のオプションを選択したときに面積が同じまま： 以下

は、サンプルデータセットです：

var pangolins = [{ 
    "id": "Philippine Pangolin", 
    "idd":"PhilippinePangolin", 
    "description": "", 
    "status": "", 
    "data": [ 
     { 
      "threat": "Local Hunting/Domestic Trade", 
      "note": "Meat + Scales + Skin", 
      "count": 7 
     }, 
     { 
      "threat": "International Trade", 
      "note": "Meat + Scales + Skin + Whole Animal", 
      "count": 7 
     }, 
     { 
      "threat": "Habitat Loss", 
      "count": 5 
     }, 
     { 
      "threat": "Pesticide use", 
      "count": 0 
     }, 
     { 
      "threat": "Deforestation", 
      "count": 4 
     }, 
     { 
      "threat": "Road Kill", 
      "count": 0 
     } 
    ] 
}, 
{ 
    "id": "Sunda Pangolin", 
    "idd":"SundaPangolin", 
    "description": "", 
    "status": "", 
    "data": [ 
     { 
      "threat": "Local Hunting/Domestic Trade", 
      "count": 3 
     }, 
     { 
      "threat": "International Trade", 
      "note": "Meat + Scales + Skin + Whole Animal", 
      "count": 10 
     }, 
     { 
      "threat": "Habitat Loss", 
      "count": 7 
     }, 
     { 
      "threat": "Pesticide use", 
      "count": 0 
     }, 
     { 
      "threat": "Deforestation", 
      "count": 4 
     }, 
     { 
      "threat": "Road Kill", 
      "count": 1 
     } 
    ] 
} 
] 

Answer 1

ここに問題があります：

var layer = svg.selectAll(".layer") 

最初にchangePangolinを実行すると、クラスlayerの要素がなく、パスが期待どおりに追加されます。しかし、2回目以降、DOMに「layer」という名前のクラスがある要素があるため、「Enter」の選択は常に空になります。

ソリューション：

がchangePangolin関数の外で、あなたのパスを追加します。

layer.transition(t) 
    .attr("d", area(newdata.data))