javascript - 使用 javascript 实现下拉菜单更改时的重绘功能

Question

我有一个函数drawMap，一旦页面加载显示data1信息和下拉列表，就会调用该函数。

当选择下拉选项时，它会更新并更改 drawMap 函数中的参数，以使用 .onchange 使用其他变量数据更新它

问题是，当下拉列表更改时，数据会添加到已调用的数据中，导致数据堆叠。

如何在下拉菜单更改时防止堆叠效应并仅加载相应的数据？

// populate drop-down
var dropdown_options = [{
    value: "data1",
    text: "Data 1: Read Hello World"
  },
  {
    value: "data2",
    text: "Data 2: Read Hello Dhivya"
  }
];

var data1 = {
  name: "World",
  date: "7 March 2017",
}

var data2 = {
  name: "Dhivya",
  date: "7 March 2017",
}

var dropDown = d3.select("#dropdown");

dropDown.selectAll(".options")
  .data(dropdown_options)
  .enter()
  .append("option")
  .attr("class", "options")
  .attr("value", function(d) {
    return d.value;
  })
  .text(function(d) {
    return d.text;
  });


function drawMap(info) {
  // console.log(settings);
  // console.log("Variable Data 1", info)
  // Add a SVG with responsive set up
  htmlText = "Hello" + info.name + ", today's date is" + info.date;

  d3.select("#text")
    .append("p")
    .text(htmlText)

}; //draw map



drawMap(data1);
// console.log(dropDown);

dropDown.on("change", function() {
  selected = this.value;
  console.log(selected);
  if (selected == "data2") {
    drawMap(data2);
  }
  if (selected == "data1") {
    drawMap(data1);
  }
});

<script src="http://www.thehindu.com/static/js/jquery-1.10.2.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>


<div id="election-viz">
  <select id="dropdown"></select>
  <div id="text"></div>

</div>

Answer 1

最简单的解决方案(众多解决方案中)是在更新函数之外定义变量:

var p = d3.select("#text")
    .append("p");

并且，在更新函数中，仅更改它:

p.text(htmlText);

这是您的代码，仅进行了更改:

// populate drop-down
var dropdown_options = [{
    value: "data1",
    text: "Data 1: Read Hello World"
  },
  {
    value: "data2",
    text: "Data 2: Read Hello Dhivya"
  }
];

var data1 = {
  name: "World",
  date: "7 March 2017",
}

var data2 = {
  name: "Dhivya",
  date: "7 March 2017",
}

var dropDown = d3.select("#dropdown");

dropDown.selectAll(".options")
  .data(dropdown_options)
  .enter()
  .append("option")
  .attr("class", "options")
  .attr("value", function(d) {
    return d.value;
  })
  .text(function(d) {
    return d.text;
  });
  
var p = d3.select("#text")
    .append("p");

function drawMap(info) {
  // console.log(settings);
  // console.log("Variable Data 1", info)
  // Add a SVG with responsive set up
  htmlText = "Hello" + info.name + ", today's date is" + info.date;


    p.text(htmlText)

}; //draw map



drawMap(data1);
// console.log(dropDown);

dropDown.on("change", function() {
  selected = this.value;
  console.log(selected);
  if (selected == "data2") {
    drawMap(data2);
  }
  if (selected == "data1") {
    drawMap(data1);
  }
});

<script src="http://www.thehindu.com/static/js/jquery-1.10.2.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>


<div id="election-viz">
  <select id="dropdown"></select>
  <div id="text"></div>

</div>

当然，更优雅的解决方案是将数据绑定(bind)到您的选择。

然而，最糟糕的解决方案是删除元素并在更新中再次绘制它们。这就是我所说的延迟更新，正确使用 D3 时这是不必要的。