CODEWITHSUNDEEP
javascriptd3.js
user3700389
user3700389

Reputation: 300

D3 inserting a chart within the tooltip

I am trying to insert a pie chart within a tooltip (not sure if it is possible though...) and ended up with the following code:

    var tip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(
        function(d) { if (d.company == "A" || d.company == "B") {
           return "Company: <span style='color:#ccff33'>"  + d.company+ " </span>"; 
        }

            else {

            var data = [60,40];
            var r = 100;

            var color = d3.scale.ordinal()
                .range(["blue", "orangered"]);

            var base = d3.select(this)

            var svg = base.append("svg")
                .attr("width", 500)
                .attr("height", 500);

            var group = svg.append("g")
                .attr("transform", "translate(30, 30)");

            var arc = d3.svg.arc()
            .innerRadius(10)
            .outerRadius(r);

            var pie = d3.layout.pie()
                .value(function (d) { return d;});

            var arcs = group.selectAll(".arc")
                .data(pie(data))
                .enter()
                .append("g")
                .attr("class", "arc");

            arcs.append("path")
                .attr("d", arc)
                .attr("fill", function (d) { return color(d.data); })



            }
        }



  );

 baseSvg.call(tip);

The first codition with the text works fine, but the Else part that should draw the pie chart does not return anything, i have struggling for a couple of days. I think my mistake come from the select part, but can't figure it out. I need the pie chart to pop up within the tooltip.

Thanks a lot for your help.

Upvotes: 0

Views: 743

Answers (1)

mgraham
mgraham

Reputation: 6207

"but the Else part that should draw the pie chart does not return anything"

That's exactly why it fails, the function returns null which then clears the tooltip's html attribute, overwriting what you've just carefully placed inside the tip.

try this at the end of your code:

return base.html();

that's everything you've just put in the tooltip turned into an html string, which the tooltip will then copy over the existing (and same) html.

Upvotes: 1

Related Questions