d3.jsのプログレスバーのデータを動的に変更する方法

Question

"#selectCountry" div内にあるテキストに応じてプログレスバーのデータを変更したいと思います。したがって、ベルギーをクリックすると親のul liのテキストも変更され、データが更新されます。 （以下のコードスニペット）

$("ul#countries li a").click(function() { 
    $("#selectCountry").html($(this).text()) 

}); 

これまでの進捗状況はここにあります。

http://plnkr.co/edit/jkywRLmvLcOUkQhP0WDf?p=preview

私はd3.js内のデータを更新するときには、特にその目的のために新しい関数を作成する必要があり、私が何を読んでから、変更する必要がある部分はここ

var divRight = dId.selectAll("#rightSkills div") 
    .data(progressData); 

知っていますしかし、関数内でデータを呼び出すのではないので、コードを書き直すことなくこれが可能かどうかわかりません。

ここにすべてのコードを示します。

HTML;

<ul> 
    <li><a href="#" id="selectCountry">Country</a> 
     <ul id="countries"> 
     <li><a href="#">Belgium</a></li> 
     <li><a href="#">France</a></li> 
     <li><a href="#">Netherlands</a></li> 
     </ul> 
    </li> 
    </ul> 
    <div id="skills"> 
    <div id='rightSkills'> </div> 
    </div> 

とjQuery/D3;

$(document).ready(function() { 
    loadChart(); 

    console.log(progressData) 
}); 

$("ul#countries li a").click(function() { 
    $("#selectCountry").html($(this).text()) 

}); 

//Data for right div 
var progressData = [{ 
    "skill": "AngularJS", 
    "progress": 60 
}]; 

var progressData2 = [{ 
    "skill": "AngularJS", 
    "progress": 32 
}]; 



var dId = d3.select("#rightSkills"); 

//Bind data for right bars 
var divRight = dId.selectAll("#rightSkills div") 
    .data(progressData); 

//Add shadow for the right bars 
divRight.enter().append("div") 
    .attr("class", "shadow"); 

//Create the bars 
d3.select("body").selectAll(".shadow") 
    .append("div") 
    .attr("class", "bar"); 

//Create the path 
d3.select("body").selectAll(".bar") 
    .append("div") 
    .attr("class", "path"); 

//Add the pattern for the bars 
d3.select("body").selectAll(".path") 
    .append("div") 
    .attr("class", "pattern"); 

//Animate the bars when they are both visible on screen 
function loadChart() { 

    var start_val = 0; 

    //add the percentage to the progress bar and transition the number 
    d3.select("body").selectAll(".pattern") 
    .append("div") 
    .text(start_val) 
    .attr("class", "percentage") 
    .transition() 
    .delay(function(d, i) { 
     return 200; 
    }) 
    .duration(1000) 
    .style("min-width", function(d, i) { 
     return (d.progress * 3)/2 + "px"; 
     console.log(1); 
    }) 
    .tween(".percentage", function(d) { 
     var i = d3.interpolate(this.textContent, d.progress), 
     prec = (d.progress + "").split("."), 
     round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1; 

     return function(t) { 
     this.textContent = Math.round(i(t) * round)/round + "%"; 
     }; 
    }); 

    //transition the width of the path 
    d3.select("body").selectAll(".path") 
    .transition() 
    .delay(function(d, i) { 
     return 200; 
    }) 
    .duration(1000) 
    .style("width", function(d, i) { 
     return d.progress * 3 + "px"; 
    }); 
} 

何かアドバイス

Answer 1

ためのおかげでここでの結果です：http://plnkr.co/edit/E3ZqfT7gaB3iBVtbSMzE?p=preview

私はこのような既存のコードから、あなたの更新機能を加えました：

function update(){ 
    d3.selectAll(".shadow").remove(); 
    console.log(progressData) 


    //Bind data for right bars 
    var divRight = dId.selectAll("#rightSkills div") 
    .data(progressData); 

    //Add shadow for the right bars 
    divRight.enter().append("div") 
    .attr("class", "shadow"); 

    //Create the bars 
    d3.select("body").selectAll(".shadow") 
    .append("div") 
    .attr("class", "bar"); 

    //Create the path 
    d3.select("body").selectAll(".bar") 
    .append("div") 
    .attr("class", "path"); 

    //Add the pattern for the bars 
    d3.select("body").selectAll(".path") 
    .append("div") 
    .attr("class", "pattern"); 
    loadChart(); 
} 

そして、私は」didnの以来、どのような進歩があるべきかわかりますこのように私はそれを作った：

$("ul#countries li a").click(function() { 
    $("#selectCountry").html($(this).text()); 
    if($(this).text() == "Belgium"){ 
    progressData[0].progress = 60; 
    update(); 
    }else if($(this).text() == "France"){ 
    progressData[0].progress = 80; 
    update(); 
    }else if($(this).text() == "Netherlands"){ 
    progressData[0].progress = 90; 
    update(); 
    }