Question

我正在尝试在工具提示中插入一个饼图（不确定它是否可能......）并最终得到以下代码：

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

文本的第一个编码工作正常，但应该绘制饼图的其他部分不会返回任何内容，我已经挣扎了几天。我认为我的错误来自选择部分，但无法弄清楚。我需要在工具提示中弹出饼图。

非常感谢你的帮助。

Answer 1

＆＃34;但应绘制饼图的其他部分不会返回任何内容＆＃34;

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

在代码末尾尝试此操作：

return base.html();

您在工具提示中输入的所有内容都会变成一个html字符串，然后工具提示将复制到现有（和相同的）html上。

D3在工具提示中插入图表

1 个答案: