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

Question

不確定如何使用這些工具提示，因爲我正在處理一些示例代碼。我有一個由d3.js創建的scatterplot，它使用醉意向每個圓圈添加工具提示。這是在翻轉任何圓圈時添加標籤的代碼部分：

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>