Question

我在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 example。

或者，如果您愿意，可以使用代码：

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)"});

Answer 1

首先，期望each()方法返回数据数组是不正确的。这只是迭代选择的一种方式。它返回的内容（被分配给_c的东西）是一个d3选择对象 - 与您调用each()的选择对象相同。即_c == districts评估为真。 AFAIK，d3选择对象不提供任何可用于按照您描述的方式收集值的内容。

通常，您希望使用.map()函数来收集这些值并将其分配给_c，但不幸的是，这似乎不可能，因为，districts 1}}是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)");
  });

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

d3.js：将数据绑定到现有的svg。 selector.each是做什么的？

1 个答案: