d3 node-tooltip values multi-line

Question

var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")";  })
.on("click", click)
.on("mouseover",function (d){       
    if(d.name=="Purchased"){                  
        jQuery.getJSON("RequestHandler?usercommand=jsoncompany&subcommand=propCount&useraction=d3Tree_frm&mgmtId="+d.id+"&type="+d.name, function(json){
            var count=JSON.stringify(json.prop_purchased_count);                      
            result="Purchased Property :"+count;                                
        });
    }   
    var g = d3.select(this);              
    var info = g.append("text")
        .classed('info', true)
        .attr('x', 30)
        .attr('y', 30)         
        .text(result);   //result="Amount":200\n"Amount":300\n"Amount":400  
})
.on("mouseout", function() {      
    d3.select(this).select('text.info').remove();
});

//result="Amount":200\n"Amount":300\n"Amount":400
i want to display tooltip such that after \n it appears in a new line within that tooltip.

How to achieve it ?

Thanks in advance

Where else apart from in `if(d.name=="Purchased")` is `result` being set? As currently it should be reading `Purchased Property : ...` rather than `Amount:...` — Rob Schmuecker, Jul 15 '14 at 10:20
Also `getJSON` is asynchronous so you will probably be executing the adding of `.text(result)` before you can manipulate the result in the `getJSON` callback. — Rob Schmuecker, Jul 15 '14 at 10:21
Please show all your code, even better would be a working jsfiddle — Rob Schmuecker, Jul 15 '14 at 10:25
@RobSchmuecker my problem is that i get result "Amount":200\n"Amount":300\n"Amount":400 so instead of \n it must appear in next line within that tooltip — beDev, Jul 15 '14 at 10:26
I know that but since you're not showing the code where that is being set it is hard to help you! — Rob Schmuecker, Jul 15 '14 at 10:27
var g = d3.select(this); var info = g.append("text") .classed('info', true) .attr('x', 30) .attr('y', 30) .text(result); — beDev, Jul 15 '14 at 10:32

score 1 · Answer 1 · edited May 23 '17 at 11:46

I can see result being set in the code you posted, however what we cannot see is where result is being set to get the content you are 'saying' it contains. That way we could help you interpret the application of these proven recommendations a lot better. But in anycase, have a look at these resources to help you in your quest.

http://bl.ocks.org/mbostock/7555321

How to dynamically display a multiline text in D3.js?

score 0 · Answer 2 · answered Jul 15 '14 at 12:34

0

In the else part add "Amount:"+ count + "\n" while you are concatenating the newline

answered Jul 15 '14 at 12:34

beeCoder

495
6
24

d3 node-tooltip values multi-line

2 Answers2

Linked