Функция зависания CSS не реагирует на зависание над объединенным топонимным разделом карты.

Использование bl.ock Майка Бостока о слиянии состояний в один многоугольник https://bl.ocks.org/mbostock/5416440, а также попытка встроить CSS-зависание, которое выделяет весь объединенный раздел.Функция зависания 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>

источник

2017-02-12 Matthew Snell

Правильный CSS должен быть:

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

Я не знаю, как это работает на государства. Вы заметите, что если вы измените его на правильный формат, он будет работать во всех «других» состояниях одновременно (он заполняет все g). Некоторые, как синтаксис сломанного наведения с наследованием от родителя g делает то, что вы хотите!

Вот правильный код, который я думаю, что вы на самом деле после того, как:

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

источник

2017-02-12 23:12:38 Mark

Спасибо, Марк! Я не знаю, что меня подтолкнуло, но ваш код отлично работал. Время сравнивать до/после и учиться. Еще раз спасибо. –

Функция зависания CSS не реагирует на зависание над объединенным топонимным разделом карты.

ответ

Смежные вопросы