D3在工具提示中插入图表 [英] 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);

文本的第一个编码工作正常，但应该绘制饼图的Else部分没有什么回报，我已经挣扎了几天。我认为我的错误来自选择部分，但无法弄清楚。
我需要在工具提示中弹出饼图。

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.

非常感谢您的帮助。

推荐答案

但应绘制饼图的Else部分不会返回任何内容

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

这正是它失败的原因，该函数返回null，然后清除工具提示的html属性，覆盖你刚刚在提示中小心放置的内容。

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

你刚刚在工具提示中输入的所有内容都变成了一个html字符串，然后工具提示就会出现复制现有的（和相同的）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.

这篇关于D3在工具提示中插入图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！