我的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或select仅选择红色圆圈?

还是还有其他方法?

颜色是这样指定的(作为“样式”属性中“填充”的值,

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文件的数据,或仅选择一种颜色的圆圈都将有所帮助。

提前致谢。

最佳答案

尝试使用此字段来获取必填字段:

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

09-10 18:30