Javascript 指定特定于元素的布尔值，以确定元素之前是否已单击-当前代码将更新所有元素

每当d3.js地图上的一个县第一次被点击时，我都会尝试登录。下面的代码更新了所有元素，但我无法找到一种方法，仅将true/false分配给单击的元素

如果我单击一个县，它将变为true并填充它，如果我再次选择该县，它将返回false。如果然后选择一个完全不同的县，则该值设置为false，并保持false。它永远不会重置为真

我觉得我需要使用

self

或

this

来帮助定义特定于元素的布尔值，但似乎没有任何组合起作用

var noFill = true;

var mousedown = function() {
    var self = d3.select(this);
    var color = document.getElementById('selcolor').value;

    if (noFill) {
        console.log(noFill);
        self.style("fill", color);
        //do some stuff
        noFill = false;
    } else {
        console.log(noFill);
        //do some stuff
    }
}

---

您现在的问题是，

noFill

是一个单一变量，您单击的所有元素都是相同的。正如您自己所说，您必须定义一个特定于元素的布尔值

一个简单的解决方案是为单击的每个元素创建一个名为

noFill

的基准特性，并在单击事件中进行切换。大概是这样的：

selection.on("click", function(d) {
    d.noFill = d.noFill || false;
    if (!d.noFill) {
        d3.select(this).attr("fill", "teal");
    } else {
        d3.select(this).attr("fill", "none");
    }
    d.noFill = !d.noFill;
})

下面是一个演示：

var svg=d3.选择（“svg”）；
变量数据=d3.范围（6）.映射（d=>({
id:d
}));
var circles=svg.selectAll（“foo”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cy”，40）
.attr（“r”，16）
.attr（“cx”，（d，i）=>40+45*i）
.attr（“笔划”、“灰色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）
.attr（“指针事件”、“全部”）
.attr（“光标”、“指针”）；
圆圈。打开（“单击”，功能（d）{
d、 noFill=d.noFill | | false；
如果（！d.noFill）{
d3.选择（此）.attr（“填充”、“teal”）；
}否则{
d3.选择（此）.attr（“填充”、“无”）；
}
d、 noFill=！d.noFill；
})

。感谢您的简单修复！双管到底在干什么？我对它进行了编码并运行，但我不知道这些是什么意思。当您第一次单击元素时，没有

noFill

属性。因此，OR操作符（双管道的名称）将属性设置为

false

。请参见此处的答案：。它很好地解释了我使用的模式。