Question

使用Mike Bostock的bl.ock将状态合并为单个多边形https://bl.ocks.org/mbostock/5416440，同时还尝试合并一些突出显示整个合并部分的CSS悬停。

未合并的状态悬停得很好，但合并的部分不响应CSS悬停。希望能解释为什么忽略它。

<!DOCTYPE html>
<style>

.states {
  fill: white;
  stroke: #000;
  stroke-width: 0.5px;
}

.states :hover {
  fill: grey;
}

.east {
  fill: orange;
}

.east :hover {
  fill: white;
}

.west {
  fill: blue;
}

.west :hover {
  fill: white;
}

.state-borders {
  fill: none;
  stroke: #000;
  stroke-width: 0.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

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

var path = d3.geoPath();

var east = {
  "26": 1, "29": 1, "37": 1, "31": 1, "33": 1,
  "34": 1, "36": 1, "39": 1, "42": 1, "44": 1, "45": 1, "47": 1, "51": 1,
  "50": 1, "55": 1, "54": 1
};

var west = {
  "9": 1, "10": 1, "12": 1, "13": 1, "19": 1, "17": 1, "18": 1, "21": 1,
  "25": 1, "24": 1, "23": 1
};

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
  if (error) throw error;

  svg.append("g")
      .attr("class", "states")
      .selectAll("path")
      .data(topojson.feature(us, us.objects.states).features)
      .enter()
      .append("path")
      .attr("d", path);

  svg.append("path")
      .attr("class", "east")
      .datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { return d.id in east; })))
      .attr("d", path);

  svg.append("path")
      .attr("class", "west")
      .datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { return d.id in west; })))
      .attr("d", path);

  svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));

});

</script>

Answer 1

正确的CSS应该是：

.east:hover { //<-- note no spaces!
  fill: white;
}

我不确定它是如何处理各州的。您会注意到，如果您将其更改为正确的格式，它适用于所有＆＃34;其他＆＃34;立即声明（它填满整个g）。一些破坏的悬停语法与父g的继承是如何做你想要的！

这是我认为你真正想要的正确代码：

＆＃13;

<!DOCTYPE html>
<style>
  .state {
    fill: white;
    stroke: #000;
    stroke-width: 0.5px;
  }
  
  .state:hover {
    fill: grey;
  }
  
  .east {
    fill: orange;
  }
  
  .east:hover {
    fill: white;
  }
  
  .west {
    fill: blue;
  }
  
  .west:hover {
    fill: white;
  }
  
  .state-borders {
    fill: none;
    stroke: #000;
    stroke-width: 0.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
  }
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
  var svg = d3.select("svg");

  var path = d3.geoPath();

  var east = {
    "26": 1,
    "29": 1,
    "37": 1,
    "31": 1,
    "33": 1,
    "34": 1,
    "36": 1,
    "39": 1,
    "42": 1,
    "44": 1,
    "45": 1,
    "47": 1,
    "51": 1,
    "50": 1,
    "55": 1,
    "54": 1
  };

  var west = {
    "9": 1,
    "10": 1,
    "12": 1,
    "13": 1,
    "19": 1,
    "17": 1,
    "18": 1,
    "21": 1,
    "25": 1,
    "24": 1,
    "23": 1
  };

  d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
    if (error) throw error;

    svg.append("g")
      .selectAll("path")
      .data(topojson.feature(us, us.objects.states).features)
      .enter()
      .append("path")
      .attr("class", "state")
      .attr("d", path);

    svg.append("path")
      .attr("class", "east")
      .datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) {
        return d.id in east;
      })))
      .attr("d", path);

    svg.append("path")
      .attr("class", "west")
      .datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) {
        return d.id in west;
      })))
      .attr("d", path);

    svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) {
        return a !== b;
      })));

  });
</script>

＆＃13;

将鼠标悬停在地图的合并topojson部分上时，CSS悬停功能无响应。

1 个答案: