我的json文件是这样的。
[
{
"ArtistID": 1,
"FollowerID": 1,
"Name": "JAYAH-Paradiso",
"Location": "UK",
"Latitude": "51.5",
"Longitude": "0.1167",
"Date": "22/03/2014"
},
{
"ArtistID": 1,
"FollowerID": 2,
"Name": "Yasmin Dan",
"Location": "London",
"Latitude": "51.5072",
"Longitude": "0.1275",
"Date": "22/03/2014"
},
{
"ArtistID": 2,
"FollowerID": 1,
"Name": "Daniel Sutka",
"Location": "London",
"Latitude": "51.5072",
"Longitude": "0.1275",
"Date": "22/03/2014"
},
{
"ArtistID": 2,
"FollowerID": 2,
"Name": "Colton Brown",
"Location": "Moore Haven, Florida",
"Latitude": "26.8333",
"Longitude": "81.1",
"Date": "22/03/2014"
}
]
我想在地图中显示艺术家1和艺术家2的追随者。我想分别显示这些数据,如红圈中艺术家1的追随者位置和蓝圈中艺术家2的追随者位置。
艺术家1和艺术家2有2个按钮。当我点击艺术家1按钮时,它应该只显示红色圆圈。
有人可以告诉我一种使用ArtistID对这些数据进行分组的方法,以便我可以在那些按钮点击中使用它吗?
或
我在地图上有这些圆圈,如10个红色圆圈(Artist1),10个蓝色圆圈(Artist2),10个绿色圆圈(Artist3)。如何使用d3 selectAll仅选择红色圆圈或选择?
或者还有其他方法吗?
这样的颜色(作为&#34的值;填充""样式"属性,
feature = g.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("id", function (d) { return d.ArtistID + d.FollowerID; })
.style("stroke", "black")
.style("opacity", .6)
.style("fill", function (d) {
if (d.ArtistID == 1) { return "red" }
else if (d.ArtistID == 2) { return "blue" }
else { return "green" }
;
})
.attr("r", 10);
所以,圆圈会像这样绘制,
<circle id="10" r="10" transform="translate(695,236)" style="stroke: rgb(0, 0, 0); opacity: 0.6; fill: rgb(255, 255, 0);"></circle>
我想选择红色圆圈。
过滤json文件的数据,或只选择一种颜色的圆圈会有所帮助。
先谢谢。
答案 0 :(得分:1)
您可以使用以下代码过滤数据并获取Artist 2的关注者数组:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function() {
var json = '[{"ArtistID":1,"FollowerID":1,"Name":"JAYAH-Paradiso","Location":"UK","Latitude":"51.5","Longitude":"0.1167","Date":"22/03/2014"},{"ArtistID":1,"FollowerID":2,"Name":"Yasmin Dan","Location":"London","Latitude":"51.5072","Longitude":"0.1275","Date":"22/03/2014"},{"ArtistID":1,"FollowerID":3,"Name":"Aaron Senior","Location":"London,UK","Latitude":"51.5072","Longitude":"0.1275","Date":"22/03/2014"},{"ArtistID":2,"FollowerID":1,"Name":"Daniel Sutka","Location":"London","Latitude":"51.5072","Longitude":"0.1275","Date":"22/03/2014"},{"ArtistID":2,"FollowerID":2,"Name":"Colton Brown","Location":"Moore Haven, Florida","Latitude":"26.8333","Longitude":"81.1","Date":"22/03/2014"},{"ArtistID":2,"FollowerID":3,"Name":"Thia Kirby","Location":"England","Latitude":"51.5","Longitude":"0.1167","Date":"22/03/2014"}]';
var obj = jQuery.parseJSON(json);
console.log(obj);
var newArray = obj.filter( function (el) { return el.ArtistID == 2 } );
console.log(newArray);
});
</script>
</head>
<body>
</body>
</html>
答案 1 :(得分:1)
尝试使用以下方法获取必填字段:
<script>
var json = [
{
"ArtistID": 1,
"FollowerID": 1,
"Name": "JAYAH-Paradiso",
"Location": "UK",
"Latitude": "51.5",
"Longitude": "0.1167",
"Date": "22/03/2014"
},
{
"ArtistID": 1,
"FollowerID": 2,
"Name": "Yasmin Dan",
"Location": "London",
"Latitude": "51.5072",
"Longitude": "0.1275",
"Date": "22/03/2014"
},
{
"ArtistID": 2,
"FollowerID": 1,
"Name": "Daniel Sutka",
"Location": "London",
"Latitude": "51.5072",
"Longitude": "0.1275",
"Date": "22/03/2014"
},
{
"ArtistID": 2,
"FollowerID": 2,
"Name": "Colton Brown",
"Location": "Moore Haven, Florida",
"Latitude": "26.8333",
"Longitude": "81.1",
"Date": "22/03/2014"
}
];
var data = eval(json);
for(x in data){
alert(data[x].ArtistID);
if(){//check condition on ArtistID and use the data
}
}
</script>
答案 2 :(得分:0)
您可能需要考虑使用下划线。 (特别是如果你正在做更多这样的操作。)where函数描述了你要找的东西。
_.where(array, {ArtistID: X});
编辑:在这种情况下,groupBy方法也可能对您有用。