Question

我有一张美国地图，其中有可选择的县，点击后将其背景更改为红色。我想要发生的是当用户点击另一个县时，它取消选择当前县，然后仅选择新的县。目前，当点击县级时，它会更改为其提供红色背景的类，但是当您单击另一个县时，两者都是红色。

以下是我绘制地图并在点击时更改类的代码：

        //DRAW MAP
        d3.json("js/map.json", function(error, mapData){
            if (error) throw error;
            //draw counties
            edit.map.append("g")
                .selectAll("path")
                .data(topojson.feature(mapData, mapData.objects.counties).features)
                .enter().append("path")
                .attr("class", "counties")
                .attr("d", edit.path)
                .on("click", function(d){
                    sFips = d.properties.STATEFP;
                    cFips = d.properties.COUNTYFP;

                    //display values in text boxes
                    $("#locationCountySelect").val(cFips);
                    $("#locationStateSelect").val(sFips);

                    //change clicked county class name                  
                    if (this.className.baseVal == "counties") {
                        this.className.baseVal = "selectedCounty";
                        //send new county to db
                    } else {
                        this.className.baseVal = "counties";
                    }
              });
         });

同样，我怎样才能一次只选择一个县？

Answer 1

为此，我建议你抛弃jQuery而不是D3。 click侦听器中的以下两行将完成此任务：

d3.select(".selectedCounty").attr("class", "counties");
d3.select(this).attr("class", "selectedCounty");

第一个语句选择具有类.selectedCounty的元素，并将class属性设置为counties。第二个选择单击的元素并将其类设置为selectedCounty。

在外部范围的变量中保留对当前所选元素的引用也可能值得考虑，以便不必在每次单击时重新选择：

var selectedCounty = d3.select(".selectedCounty");

edit.map.append("g")
// ...
  .on("click", function(d) {
    selectedCounty.attr("class", "counties");
    selectedCounty = d3.select(this).attr("class", "selectedCounty");
  }

根据Teton-Coder comment的要求，可能需要切换课程而不是替换课程。使用selection.attr("class", "selectedCounty")将设置class属性的值，从而替换元素上设置的任何其他类。虽然允许您通过此函数将以空格分隔的列表传递给属性，但是在元素上切换特定类的最简单方法是使用selection.classed()。该函数的第二个参数是一个布尔值，用于确定是将该类分配给该元素还是从该元素中删除，同时保留所有其他类的完整性。因此，上述代码可以重写为：

var selectedCounty = d3.select(".selectedCounty");

edit.map.append("g")
// ...
  .on("click", function(d) {
    selectedCounty.classed("selectedCounty", false);
    selectedCounty = d3.select(this).classed("selectedCounty", true);
  }

如何在使用javascript单击另一个类时取消选择一个类

1 个答案: