根据一个属性过滤 JavaScript 对象答案

【问题标题】：Filter JavaScript object according to one attribute根据一个属性过滤 JavaScript 对象
【发布时间】：2014-09-04 18:21:44
【问题描述】：

我的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 个红色圆圈（艺术家 1）、10 个蓝色圆圈（艺术家 2）、10 个绿色圆圈（艺术家 3）。如何使用 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 文件的数据，要么只选择一种颜色的圆圈。

提前致谢。

【问题讨论】：

你看过过滤器吗？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。只需检查 ArtistID 的元素并执行/调用任何不同的内容。
它不适用于其他 d3 方法：/
查看d3.nest() 和this answer。
@Isu 你应该放一些代码然后让其他人能够更好地帮助你。 filter 允许您按照您的要求分离数据。像var followersOfA1 = data.filter(isArtist1); var followersOfA2 = data.filter(isArtist2); 这样的东西分成两个数据数组。

标签： javascript d3.js leaflet

【解决方案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】：

您可以使用以下代码过滤数据并获取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>

【讨论】：

它在浏览器控制台中给出一个错误说“json is not defined”o.O

【解决方案3】：

您可能需要考虑为此使用下划线。（特别是如果您正在执行更多这样的操作。） where 函数描述了您要查找的内容。

_.where(array, {ArtistID: X});

http://underscorejs.org

编辑：在这种情况下，groupBy 方法也可能对您有用。

【讨论】：