3

我遇到了D3 joins的问题。我在气泡图上创建了一些圆圈。当用户单击“显示为地图”按钮时，我想将圆圈转换为地图，然后为每个圆圈添加一个标签。

目前，点击处理程序将圆圈移动 OK，然后给我一个 JavaScript 错误而不是添加标签：Uncaught TypeError: Object [object SVGCircleElement]... has no method 'append'。我知道这是因为我的连接语法不正确，但我该如何解决呢？

我能找到的所有添加新 D3 元素的示例都适用于您要绑定新数据的情况——而不是当您已经拥有已绑定数据的现有元素时。

这是我创建圈子的代码：

  var circle = g.selectAll('.city')
     .data(data).enter()
     .append('circle')
    .attr('class', 'city')
    .attr('r', rfunc).attr("cy", 0)
    .attr("cx", function(d, i) {
      return rdist(d['dist']);
    }).attr("transform", function(d, i) {
      return "rotate(" + d.radial_pos + " 0 0)";
    });

这是我的点击处理程序：

d3.select("#layout_geo").on("click", function() {
    // Move the circles - this works OK. 
    var circles = d3.selectAll(".city")
    .transition()
    .duration(1300)
    .attr('cx', function(d) {
       return merc([d['lon'], d['lat']])[0] - 350;
    }).attr('cy', function(d) {
      return merc([d['lon'], d['lat']])[1] - 280;
    });
    // How to add text to each circle?
    circles.append('text')
      .attr('class', 'background')
      .text(function(d) {
         console.log(d.name + ', ' + d.city);
          return d.name + ', ' + d.city;
      })
      .attr('cx', function() {
        return ???;
      }).attr('cy', function() {
        return ???;
      });
  });
4

1 回答 1

3

这里的问题是，这circles不是一个正常的选择，而是一个过渡。它们有一个方便的remove()功能，允许删除项目，但不能append添加更多元素。

另一个问题是在属性中附加元素不是<text>正确的 SVG。在这种情况下，您需要将和放入这样的元素中。代码中的相应更改将是：<circle><text><circle>g

d3.select("#layout_geo").on("click", function() {
    // Assign the seleciton to circles
    var circleG = d3.selectAll(".city");

    circleG.transition()
      .duration(1300)
      .attr('transform', 'translate(-100, -50)'); // Ignoring the rotation.

    // And append text to the selection
    circleG.append('text')
      .attr('class', 'background')
      .attr('dx', '1em')
      .text(function(d) {
          console.log(d.name + ', ' + d.city);
          return d.name + ', ' + d.city;
      });
  });

请注意，在<circle>更改transform属性时，元素上的旋转会丢失。它可以通过使用两个嵌套的 g 元素来保留，并在外部旋转。

于 2013-01-22T14:07:45.463 回答