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

一切都在一起：

＆＃13;

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')

＆＃13;

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

＆＃13;

使用tipsy和d3.js的其他工具提示文本

1 个答案: