[英]Can I update DOM elements in a D3 selector based on a data join to a different data object?
tl;dr tl; dr
Can I create elements using data that looks like: 我可以使用如下数据创建元素:
[{"id": 1, ...}, {"id: 2, ...}, ..]
and update attributes of the elements using data that looks like: 并使用如下数据更新元素的属性:
[2, 4, 7]
(where the elements of the array are a subset of the ids of the initial data set). (其中数组的元素是初始数据集ID的子集)。
Long version 长版
I have data that looks like this: 我有看起来像这样的数据:
[
{
"id": 1,
"latitude": 38.314552,
"longitude": -88.9025347755102,
"name": "JEFFERSON COUNTY JAIL ",
"official_name": "Jefferson County Justice Center",
"url": "https://www.ice.gov/detention-facilities/facilities/jeffeil.htm"
},
{
"id": 2,
"latitude": 41.875702,
"longitude": -87.63072,
"name": "CHICAGO HOLD ROOM ",
"official_name": "Chicago Hold Room",
"url": ""
},
{
"id": 3,
"latitude": 43.407029,
"longitude": -88.704349,
"name": "DODGE COUNTY JAIL, JUNEAU ",
"official_name": "Dodge Detention Facility",
"url": "https://www.ice.gov/detention-facilities/facilities/dodgewi.htm"
},
...
]
I put it on an SVG map like this: 我把它放在这样的SVG地图上:
var projection = d3.geo.albersUsa()
.scale(scale)
.translate([width / 2, height / 2]);
var facilityCircles = svg.append("svg:g")
.attr("id", "facilities");
d3.json("data/facilities.json", function(facilities) {
var positions = [];
var positionsByFacilityId = {};
var pointSize = 5;
facilities.forEach(function(facility) {
var loc = [facility.longitude, facility.latitude];
var pos = projection(loc);
positions.push(pos);
positionsByFacilityId[facility.id] = pos;
});
facilityCircles.selectAll("circle")
.data(facilities, function(d) { return d.id; })
.enter().append("svg:circle")
.attr("data-facility-id", function(d, i) { return d.id; })
.attr("cx", function(d, i) { return positionsByFacilityId[d.id][0]; })
.attr("cy", function(d, i) { return positionsByFacilityId[d.id][1]; })
.attr("r", function(d, i) { return pointSize; });
}
However, later on, I want to update attributes of the circles based on another data object, which would just be an array of ids representing a subset of the id properties from the initial data, eg [2, 4, 5]
但是,稍后,我想基于另一个数据对象更新圆的属性,该数据对象将只是代表初始数据中id属性子集的id数组,例如
[2, 4, 5]
Can I do something like this to update the attributes of only selected elements mapped to data objects with the given ids? 我可以做这样的事情来更新仅映射到具有给定ID的数据对象的选定元素的属性吗?
facilitiesSubset = [2, 4, 5];
facilityCircles.selectAll("circle")
.data(facilitiesSubset)
.attr("fill", "green");
or, should I just extract the ids from the initial data and use those in the call to data()
that is used to create the elements? 还是我应该从初始数据中提取ID,并在用于创建元素的
data()
调用中使用ID?
To make this a little easier, I'd suggest changing the naming convention a little bit: 为了使这更容易一些,我建议稍微更改一下命名约定:
var facilityCircleContainer = svg.append("svg:g")
.attr("id", "facilities");
Since the svg:g object isn't actually the circles, it is just holding them. 由于svg:g对象实际上不是圆圈,因此仅保留了圆圈。 So then:
因此:
var facilityCircles = facilityCircleContainer.selectAll("circle")
.data(facilities, function(d) { return d.id; })
.enter().append("svg:circle")
.attr("data-facility-id", function(d, i) { return d.id; })
.ect(...)
facilityCircles now refers to the circles with their attached data now. facilityCircles现在是指现在带有其附加数据的圆。 Updating the fill based on the array is pretty simple:
根据数组更新填充非常简单:
facilityCircles.attr("fill", function(d){
facilitiesSubset.indexOf(d.id) != -1 ? "green" : "red"});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.