使用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>