d3.js:将数据绑定到现有svg.selector.each做什么

d3.js: binding data to existing svg. what selector.each does?

本文关键字：selector svg each 什么 js 数据绑定 d3      更新时间：2023-09-26

我在html页面上有一些svg。我想在它们上绑定一些数据，并根据这些数据添加装饰元素。我想我要做的是：

// pseudo-code
selection = select all existing svg piece i want to decorate
var datas = selection.each( function(d,i) { // each is right? maybe selection.datum() is better?
    var data = this.(do something with the svg piece)
    return data; 
});
// add elements with the "default" chain selection.data(datas).enter().append()

我注意到selection.each在我可以找到返回数据的地方不会返回一些东西。我想这就是方法，但我不知道我必须做什么才能看到绑定的数据。

所以我必须做一些肮脏的变通方法，比如：

var datas = [];
selection.each( function(d,i) { // each is right? maybe selection.datum() is better?
    var data = this.(do something with the svg piece)
    datas.push(data); 
});

为什么？如果不手动将数据推入数组并将数据绑定到某个现有svg元素中，我如何做类似的事情？

下面是一个jsFiddle示例。

或者，如果你喜欢，代码：

html:

<div id="container">
    <svg>
        <rect id="0" x="0" y="50" width="30" height="30"/>
        <rect id="1" x="50" y="50" width="30" height="30"/>
        <rect id="2" x="100" y="50" width="30" height="30"/>
        <rect id="3" x="150" y="50" width="30" height="30"/>
        <rect id="4" x="200" y="50" width="30" height="30"/>
        <rect id="5" x="250" y="50" width="30" height="30"/>
    </svg>
</div>

js:

var svg = d3.select("#container svg"); 
var districts = svg.selectAll("rect"); 
var district_data = []; 
var _c = districts.each(function(d, i) { 
    var bbox = this.getBBox(); 
    var centroid = [
        bbox.x + bbox.width/2, 
        bbox.y + bbox.height/2
    ];
    var ret = {centroid:centroid, position:bbox.x};
    district_data.push( ret );
    return ret;
});
// now, i'm expecting that _c should be something 
// similar to district_data
console.log(_c);
svg
  .selectAll("circle")
  .data(district_data) // i think i should use `_c` instead of manually created `district_data` but does not work
  .enter()
  .append("circle")
     .attr("class", "district_circle")
     .attr("cx", function(d){ return d.centroid[0]})
     .attr("cy", function(d){ return d.centroid[1]})
     .attr("r", 10)
     .attr("fill", function(d){ return "rgb("+d.position+",0,0)"});

首先，期望each()方法返回数据数组是不正确的。这只是对所选内容进行迭代的一种方式。它返回的(分配给_c的东西(是一个d3选择对象——与您调用each()的选择对象相同。即_c == districts评估为true。AFAIK，d3选择对象没有提供任何可以用来收集值的东西，就像你描述的那样

通常，您希望使用.map()函数来收集这些值并将其分配给_c，但不幸的是，这在这里似乎不可能，因为districts是d3选择，而不是平面数组。如果你试着对它调用map()，我认为它实际上不会迭代选择中的每个元素，而且你还会得到一个js错误，因为this对象没有被分配给你需要调用getBBox()的SVG元素。

总之，我认为您采用的方法是正确的：使用each()进行迭代，并通过推入来构建数组

我可以更简洁地提出另一种方法，但它需要修改现有SVG的结构：

与其让rects成为兄弟，不如将每个都嵌套在g中。类似：

<div id="container">
<svg>
  <g>
    <rect id="0" x="0" y="50" width="30" height="30"/>
  </g>
  <g>
    <rect id="1" x="50" y="50" width="30" height="30"/>
  </g>
  ...

然后在JS(未测试(中：

svg.selectAll('g')
  .each(function(d, i) { // Note, d is actually undefined, bc no data-binding was done
    var rect = d3.select(this).select('rect');
    var bbox = this.getBBox(); 
    var centroid = [
        bbox.x + bbox.width/2, 
        bbox.y + bbox.height/2
    ];
    // Now create the circle, appending it to the group,
    // as a sibling of its corresponding rect
    var circle = d3.select(this).append('circle')
     .attr("class", "district_circle")
     .attr("cx", centroid[0])
     .attr("cy", centroid[1])
     .attr("r", 10)
     .attr("fill", "rgb("+bbox.x+",0,0)");
  });

这仍然不是完全好的形式，因为定位应用于每个圆和矩形，而理想情况下，定位将应用于组级别——这并不难实现。但现在我们越来越挑剔了。

相关文章：