Question

我想根据＆＃34; #selectCountry＆＃34;中的文字更改进度条的数据。 DIV。因此，当您单击比利时时，父级文本也将更改，然后将更新数据。（以下代码片段）

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

});

到目前为止，这是我进步的一部分;

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";
    });
}

感谢您的任何建议

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();
}

因为我不知道应该取得什么进展，所以我就这样做了：

$("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();
  }

如何在d3.js中动态更改进度条的数据

1 个答案: