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>