Все дуги, добавленные с помощью Карты данных , на самом деле имеют ключ data в формате JSON ( datamaps.js # L356 ):
var arcs = layer.selectAll('path.datamaps-arc').data( data, JSON.stringify );
Обратите внимание, что DataMaps использует JSON.stringify в качестве ключевой функции . Было бы неплохо, если бы DataMaps предоставили здесь возможность использовать пользовательскую функцию клавиш, но, увы ...
Хотя сами эти ключи не сохраняются, достаточно убедиться, что для одних и тех же данных будет только одна дуга. Данные дуги - это сам идентификатор дуги.
Используя эти знания, мы можем определить дугу, сравнив ее данные:
var selectedArcs = d3.selectAll('path.datamaps-arc').filter(function(data) {
// compare data
return data === someValue;
});
Чтобы продвинуться дальше, мы можем настроить данные, которые мы передаем в DataMaps.arc, чтобы они действительно содержали наш дружественный для сравнения идентификатор. Поле origin и destination является обязательным, но мы можем использовать любое другое поле по своему усмотрению.
{
id: 'some-unique-identifier',
origin: {
latitude: 52.520008,
longitude: 13.404954
},
destination: {
latitude: 37.618889,
longitude: -122.375
}
}
Затем мы могли бы использовать эти измененные поля для идентификации нашей дуги:
var selectedArcs = d3.selectAll('path.datamaps-arc').filter(function(data) {
return data.id === 'some-unique-identifier';
});
Имейте в виду, что DataMaps использовали каждую нашу дугу, используя ее полное значение data; Это означает, что два данных с одинаковыми id, но разными origin и / или destination значениями будут считаться двумя разными дугами.
Вот простая демонстрация с использованием модифицированной версии исходного примера:
var arcData = //Test Data
[
{
id: 123,
origin:
{
latitude: 52.520008,
longitude: 13.404954
},
destination: {
latitude: 37.618889,
longitude: -122.375
}
},
{
id: 'abc',
origin:
{
latitude: 52.520008,
longitude: 13.404954
},
destination: {
latitude: 25.793333,
longitude:-80.290556
}
},
{
id: 'xyz',
origin:
{
latitude: 52.520008,
longitude: 13.404954
},
destination: {
latitude: 35.877778,
longitude: -78.7875
}
}
];
$(document).ready(function() {
var map = new Datamap({ //create data map
element: document.getElementById('container'),
fills: {
defaultFill: "#343a40",
}
});
function drawMap() {
map.arc(arcData, {strokeWidth: 2, animationSpeed: 1000, strokeColor: '#b1dd00'});
};
function removeArc(id) {
var all = d3.selectAll('path.datamaps-arc');
var sel = all.filter(function(data) {
return data.id === id;
});
sel.transition().duration(1000).style("opacity", 0).remove();
};
$('button').on('click', function(){
var id = $(this).data('arc');
if (id) {
removeArc(id);
} else {
drawMap();
}
});
drawMap();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://datamaps.github.io/scripts/datamaps.world.min.js"></script>
<button type="button" data-arc="123">Remove Arc id:123</button>
<button type="button" data-arc="abc">Remove Arc id:abc</button>
<button type="button" data-arc="xyz">Remove Arc id:xyz</button>
<button type="button">Redraw</button>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>