Question

目前，我的D3代码会沿着路径设置svg圈子，这些圈子的svg'name'标签会沿着每个路径移动。

当一个圆圈悬停在上面时，一个div（我在同一组'g2'中创建的外来物体与标签一起出现）中出现了一条注释。

我希望这些就像工具提示一样。问题是我不能让div以与名称标签相同的方式沿路径转换 - 它们只是粘在页面的左上角。

我不确定问题是我是如何分组的，或者是否应该将foreignObject直接附加到svg。我已尝试过其他问题的各种事情和建议，但没有成功，所以任何帮助都赞赏！

此外，我只对在Chrome中使用此功能感兴趣。

这是一个jsfiddle：http://jsfiddle.net/yumiP/Q5Jag/1618/

var greetings = ["Hello","Hi","Howdy"];
var names = ["Person A","Person B","Person C"];

var width = 960,
    height = 500;

var n = greetings.length,
    m = 12,
    degrees = 180 / Math.PI;

var bubbles = d3.range(n).map(function() {
  var x = Math.random() * width,
      y = Math.random() * height;
  return {
    vx: Math.random() * 2 - 1,
    vy: Math.random() * 2 - 1,
    path: d3.range(m).map(function() { return [x, y]; }),
    count: 0
  };
});

var svg = d3.select("body").select("svg")
    .attr("width", width)
    .attr("height", height);

var g = svg.selectAll("g")
    .data(bubbles)
  .enter().append("g")
  .on("mouseover", function(d,i){console.log(greetings[i])});

var g2 = g.append("g");

var labels = g2.append("text")
    .attr("dy",".35em")
    .style("font-size", "19")
    .attr("class", "labels")
    .text(function(d,i){return names[i]});

var speech = g2.append("foreignObject")
          .attr("class", "tooltip")
          .style("opacity","0")
          .append("xhtml","div")
          .append('div')
          .attr("class","tooltip")
          .html(function(d,i){return greetings[i]});

var circle = g.selectAll("circle")
    .data(bubbles)
    .enter().append("circle")
    .attr("r", 15)
    .on("mouseover", function(d,i)  {speech.filter(function(p){
          if(p === d) d3.select(this).transition().duration(1000).style("opacity","1");
          else d3.select(this).style("opacity","0");
       });})
       .on("mouseout", function(d,i) {speech.filter(function(p){
             if(p === d) d3.select(this).transition().duration(1000).style("opacity","0");
         });});

d3.timer(function() {
  for (var i = -1; ++i < n;) {
    var bubble = bubbles[i],
        path = bubble.path,
        dx = bubble.vx,
        dy = bubble.vy,
        x = path[0][0] += dx,
        y = path[0][1] += dy,
        speed = Math.sqrt(dx * dx + dy * dy),
        count = speed * 10,
        k1 = -5 - speed / 3;

    if (x < 0 || x > width) bubble.vx *= -1;
    if (y < 0 || y > height) bubble.vy *= -1;
  }
  circle.attr("transform", circleTransform);
  g2.attr("transform", textTransform);
});

function circleTransform(d) {
  return "translate(" + d.path[0] + ")";
}

function textTransform(d) {
  return "translate(" + d.path[0]  + ")translate(30)";
}

很抱歉发布了这么多代码。对于这个SO问题，代码的哪些部分被认为是不必要的，所以任何提示都会有所帮助。

foreignObject div转换不工作D3

0 个答案: