javascript - 使用 Tipsy 和 d3.js 的附加工具提示文本

Question

不太确定如何使用这些工具提示，因为我正在处理一些示例代码。我有一个由 d3.js 创建的散点图，它使用 Tipsy 向每个圆圈添加工具提示。这是当您将鼠标悬停在任何圆圈上时添加标签的代码部分:

circles.append("title")
  .text(function(d) { return d.attribute; })

“属性”是我的数据中的列之一。我可以将其更改为我的任何列名称，这将成为工具提示中显示的内容。我想做的是有一个带有完整句子的工具提示，其中包括每列的一段数据。我想做的是这样的事情，当然，这根本不起作用，但我希望它能传达要点:

circles.append("title")
  .text(function(d) { return d.attribute; } + "some text here" + function(d) { return d.variance; }    + "more text here" + function(d) { return d.incidence; })

关于如何实现这项工作的想法？

Answer 1

你可以这样做:

circles.append("title")
  .text(function(d) {
     return d.attribute + " some text here " + d.variance + " more text here " + d.incidence;
  })

一切都在一起:

var data = [
  {
    "attribute": "attr1",
    "variance": "variance1",
    "incidence": "incidence1"
  },
  {
    "attribute": "attr2",
    "variance": "variance2",
    "incidence": "incidence2"
  },
  {
    "attribute": "attr3",
    "variance": "variance3",
    "incidence": "incidence3"
  } 
];

var svg = d3.select('body').append('svg');

svg.attr('height',500).attr('width',500);

var circles = svg.selectAll('circle').data(data);

circles.enter().append('circle')
  .attr('cx',function(d,i) { return i * 100 + 100;})
  .attr('cy',function(d,i) { return 100})
  .attr('r',50)
  .attr('fill','green')
  .append('title')
  .text(function(d) {
    return d.attribute + " some text here " + d.variance + " more text here " + d.incidence;
  }) 
  .attr('fill', 'black')

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>