Я хотел бы изменить данные для индикатора выполнения в зависимости от текста, находящегося внутри div «#selectCountry». Таким образом, при нажатии на Бельгию также изменится родительский текст ul li, который затем обновит данные. (фрагмент кода для этого ниже)Как динамически изменять данные для индикатора выполнения в d3.js
$("ul#countries li a").click(function() {
$("#selectCountry").html($(this).text())
});
Вот plnk моего прогресса до сих пор;
http://plnkr.co/edit/jkywRLmvLcOUkQhP0WDf?p=preview
Я знаю, что часть, которая должна изменить здесь
var divRight = dId.selectAll("#rightSkills div")
.data(progressData);
Из того, что я прочитал, при обновлении данных внутри d3.js вы должны создать новую функцию, специально для этой цели , но поскольку я не вызываю данные внутри функции, я не уверен, что это возможно без перезаписи кода?
Вот и весь код;
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";
});
}
Спасибо за любые советы
Что вы имеете в виду в зависимости от текста, находящегося внутри div? – echonax