javascript - 分配特定于元素的 bool 值以确定元素是否已被先前单击 - 当前代码一揽子更新所有元素

Question

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

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

我觉得我需要使用 self 或 this 来帮助定义特定于元素的 bool 值，但似乎没有组合起作用。

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
    }
}

Answer 1

你现在的问题是 noFill 是一个单一的变量，它对于你点击的所有元素都是相同的。正如您自己所说，您必须定义一个特定于元素的 bool 值。

一个简单的解决方案是为您单击的每个 元素创建一个名为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.select("svg");

var data = d3.range(6).map(d => ({
  id: d
}));

var circles = svg.selectAll("foo")
  .data(data)
  .enter()
  .append("circle")
  .attr("cy", 40)
  .attr("r", 16)
  .attr("cx", (d, i) => 40 + 45 * i)
  .attr("stroke", "gray")
  .attr("stroke-width", 2)
  .attr("fill", "none")
  .attr("pointer-events", "all")
  .attr("cursor", "pointer");

circles.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;
})

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

请注意，在匿名函数中我使用的是 function(d)，它使用每个元素的数据 (d) 作为参数，而不仅仅是 函数()。