D3雷達圖表數據更新不起作用

Question

我想繪製D3雷達圖表，用戶可以在其中選擇下拉菜單選項並更新數據。然而，第一個被選中的是繪製的，但之後如果我選擇了其他的數據不會更新。該代碼粘貼下面，我強調了問題的一部分：

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的元素，並且按預期添加路徑。但是，從第二次開始，由於DOM中已經有一個名爲「layer」的類，因此您的「輸入」選項將始終爲空。

解決方案：

追加你的路徑changePangolin功能外：

var layer = svg.append("path") 
    .attr("fill", "none") 
    .attr("stroke", "black") 
    .attr("stroke-width", "2px");; 

而且，裏面changePangolin，簡單地改變它：

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