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>

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

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

Answer 2

您的函数drawMap会在每次调用时将新数据附加到页面。如果您想阻止这种情况，您可以先清除页面：

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

text.select("p")
    .remove(); // remove the old <p> element

text.append("p")
    .text(htmlText)

使用javascript在下拉列表上重绘功能

2 个答案: