在文本标签内添加一个 div

Question

我有一个文本标签 <text></text>，它来自 c3 圆环图标题。我想更改该文本标签的内容。所以我这样尝试：

$handlerdiv.find(".c3-chart-arcs-title").append("<div style='background:green;'>"+skbl+"</div>");

但它不起作用，因为无法附加到文本标签。

我想要的是在图表圈内显示圆环图标题，这个标题内容应该是两行。

图表是这样生成的：

var chart = c3.generate({
    bindto : bindto,
    data : {
        columns : [],
        type : 'donut',
        colors : colors,
        order : order
    },
    donut : {
        title : title,
        label : {
            show : label
        },
        width : width,
    },
});

Answer 1

您可以使用 d3.js 向图表添加元素，例如圆环图中标题的第二行：

d3.select(".c3-chart-arcs-title")
  .append("tspan")
  .attr("dy", 16)
  .attr("x", 0)
  .text("Second title");

这是一个fiddle：https://jsfiddle.net/beaver71/20s6sw4L/

在文本标签内添加一个 div

Add a div inside the text tag

javascript

jquery

d3.js

c3.js