Question

我对d3.js非常陌生。我有父母g container看起来像这样

var g = pieParentG.append("g")
    .attr("transform", "translate(" + xVal + "," + yVal + ")")
    .selectAll("arc")
    .data(pie(dataVal))
    .enter()
    .append("g")
    .attr("class", "arc");

我正在尝试添加像这样的子文本节点

 var textG = g.append("g")
     .append("text")
     .html(function(d) {
         return d.data.zone;
     });

但是，dataval对象数组可能包含重复值。数组的一个例子是

[{
        "count": 1267,
        "path": 1,
        "zone": "Bandra-Pillers"
    },
    {
        "count": 697,
        "path": 2,
        "zone": "Bandra-Pillers"
    },
    {
        "count": 560,
        "path": 3,
        "zone": "Bandra-Pillers"
    }
]

文本字段应映射到数组中的此区域字段。如果是重复值，例如在这种情况下，我只想附加1个文本元素。 Array.filter函数是一个选项吗？如果是，那么我在哪里使用它？

Answer 1

文本字段应映射到数组中的此区域字段。如果是重复值，例如在这种情况下，我只想附加1个文本元素。 Array.filter函数是一个选项吗？如果是，那么我在哪里使用它？

实际上，如果您只想从数组中返回与此zone匹配的1个对象，则无法使用.filetr()，因为它将返回具有相同zone的元素。

您可以使用 Array#find() ，它只返回通过条件的第一个object：

find()方法返回数组中第一个满足提供的测试函数的元素的值。否则返回undefined。

这应该是你的代码：

var myObj = dataVal.find(function(item) {
  return item.zone === "Bandra-Pillers";
});

<强>演示：

var dataVal = [{
    "count": 1267,
    "path": 1,
    "zone": "Bandra-Pillers"
  },
  {
    "count": 697,
    "path": 2,
    "zone": "Bandra-Pillers"
  },
  {
    "count": 560,
    "path": 3,
    "zone": "Bandra-Pillers"
  }
];

var myObj = dataVal.find(function(item) {
  return item.zone === "Bandra-Pillers";
});

console.log(myObj);

修改

您可以在.html()的回调函数中调用它，如下所示：

var textG = g.append("g") .append("text") .html(function(d) { return dataVal.filter(function(item){ return item.zone === zone; //Pass zone variable here })[0].data.zone; });

如何仅返回绑定到d3.js中元素的数组对象的唯一值

1 个答案: