d3 selectAll:计数结果

hrirmatl  于 2023-06-23  发布在  其他
关注(0)|答案(4)|浏览(119)

如何计算selectAll匹配了多少个节点?(无关联数据)
或者如果有数据,如何从选择中计算数据?(假设我已经用“data(function...)”设置了它,所以我事先不知道长度)

nwnhqdif

nwnhqdif1#

只要使用d3.selectAll(data).size()。希望这个例子可以帮助你:

var matrix = [
   [11975,  5871, 8916, 2868],
   [ 1951, 10048, 2060, 6171],
   [ 8010, 16145, 8090, 8045],
   [ 1013,   990,  940, 6907]
 ];

 var tr = d3.select("body").append("table").selectAll("tr")
            .data(matrix)
            .enter().append("tr");

 var td = tr.selectAll("td")
          .data(function(d) { return d; })
          .enter().append("td")
          .text(function(d) { return d; });
 var tdSize=tr.selectAll("td").size();

完成jsfidle here

toe95027

toe950272#

如果你想方便地从回调函数中获得长度,比如设置一个元素属性,似乎你可以从第三个参数中获得它,如下所示:

node
    .attr('some-property', function(datum, index, array) {
        // d/datum = the individual data point
        // index = the index of the data point (0, 1, 2, 3, etc)
        // array = full array of data points
        // array.length = the size/length of the data points / dataset
        
        // some calculation involving array.length or whatever
        return someValue;
    });

类似于JavaScript forEach/filter/etc的调用签名。数组函数
似乎大多数d3函数都支持这一点:
https://github.com/d3/d3-selection
...当前datum(d)、当前index(i)和当前group(nodes),其中this作为当前DOM元素(nodes[i])
这是一个在整个文档中重复的短语。因此,如果你看到一个d3函数,你会使用d,你可能也会得到indexarray

9avjhtql

9avjhtql3#

我以前做过的一种方法是通过创建一个新对象将信息传递到数据函数中。

.data(function(d) {         
     return d.Objects.map(function(obj) {
         return {
             Object: obj,
             TotalObjects: d.Objects.length
         }
   });

然后在更新部分中使用Object,并且仍然有可用的计数。

.attr("x", function(d) {

    return d.Object.X;
 })
 .attr("y", function(d) {

    return d.TotalObjects;
 })
pgccezyw

pgccezyw4#

要获得数据计数,在.selectAll()和.data()之后,似乎需要.enter(),在.size()之前:

legend_count = legendBoxG.selectAll("legend.box")
                         .data(curNodesData, (d) -> d.id)
                         .enter()
                         .size()

如果没有.enter(),结果为0。.enter()使其返回数据计数。(上面的代码以咖啡方言显示。)
在向svg对象添加属性之前,我需要得到count(以便适当地缩放它们),而前面的例子都没有做到这一点。然而,我似乎不能添加更多的属性后剥离计数到一个变量如上。因此,尽管上面的方法演示了data()和enter()的操作,但它并不是一个真正实用的解决方案。我所做的是在执行selectAll()之前获取数据数组本身的长度。我可以最简单地使用数据数组本身的length * 属性 *(不是函数)来做到这一点:

legend_count = curNodesData.length

相关问题