在 d3.select(this) 中单击返回路径样式颜色

Question

我在d3.js 地图中有一个function。

我使用d3.select(this).style('fill', 'red'); 来改变用户点击svg path 时的颜色。

颜色发生变化，但我想在单击新路径时将svg path 颜色更新为旧颜色。

这是我使用的函数：

.on('click', function(d) {
        d3.select(this).style('fill', 'red')
            .style('stroke-width', 3);
        var year = $(".year-label").text();
        var infoYear = 'yr' + year;
        var counts = [];
        for (i = 1984; i <= 2016; i++){
            cnts = 'yr' + i.toString();
            counts.push(d.properties[cnts]);
        }
        console.log(counts);
        console.log(counts.length);

        $('.text-name').empty();
        var nameit = d.properties.city;
        $('.text-name').append(nameit);
});

每条路径都有一个唯一的id。所以我尝试了这个函数但没有结果：

.on('click', function(d) {
    d3.select('._' + d.geoid).this.style('fill', 'red');

我缺少一个元素，所以我试图通过对该行的小改动来解决它。但是效果不好。

这是这个问题的图片：

提前感谢您的支持！

Answer 1

有几种方法可以恢复先前单击路径的颜色。但最重要的问题是：最初是如何设置颜色的？

例如，如果所有路径都有灰色填充，只有被点击的路径有红色填充，您可以简单地编写以下（惰性）代码：

d3.selectAll("path").style("fill", "gray")
d3.select(this).style("fill", "red")

类似这样的：

var data = d3.range(4);
var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 100);

var circles = svg.selectAll(".circles")
  .data(data)
  .enter()
  .append("circle");

circles.attr("cy", 50)
  .attr("r", 50)
  .attr("cx", function(d){ return 50 + d*100})
  .attr("fill", "gray")
  .attr("cursor", "pointer");

circles.on("click", function(){
  d3.selectAll("circle").attr("fill", "gray");
  d3.select(this).attr("fill", "red");
});

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

另一方面，如果它们的颜色取决于数据，您可以保存最后点击的路径并在点击的函数内再次设置颜色。

由于我不知道您如何填充其他路径，这是另一个 sn-p，显示如何保存以前的颜色并在下次单击时检索它。在这个 sn-p 中，每个圆圈都有一个随机颜色。当您单击它时，它会变为红色，但在变为红色之前它会保存单击的元素及其颜色：

prevElem = d3.select(this);
prevColour = d3.select(this).attr("fill");

然后，当您单击另一个圆圈时，它会将先前单击的圆圈恢复为以前的颜色：

if(prevElem){prevElem.attr("fill", prevColour);};

检查sn-p：

var data = d3.range(4);
    var svg = d3.select("body")
      .append("svg")
      .attr("width", 400)
      .attr("height", 100);

var prevElem, prevColour;

    var circles = svg.selectAll(".circles")
      .data(data)
      .enter()
      .append("circle");

    circles.attr("cy", 50)
      .attr("r", 50)
      .attr("cx", function(d){ return 50 + d*100})
      .attr("fill", function() {
    return "hsl(" + Math.random() * 360 + ",100%,50%)";
    })
      .attr("cursor", "pointer");

    circles.on("click", function(){
      if(prevElem){prevElem.attr("fill", prevColour);};
      prevElem = d3.select(this);
      prevColour = d3.select(this).attr("fill");
      d3.select(this).attr("fill", "red");
    });

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