Question

我想在c3js图表中添加水印，我不知道从哪里开始，并且会欣赏正确方向的任何指针。感谢。

Answer 1

您可以获取图表的根div并添加背景图像：

d3.select(chart.internal.config.bindto)
    .style ("background-image", "url('https://cdn.pixabay.com/photo/2013/07/13/12/42/do-not-copy-160138_960_720.png')")
  .style ("background-size", "160px 160px")
  .style("background-repeat", "repeat")
  ;

麻烦的是，无论你在这里做什么都可以像添加它一样轻松删除，所以如果你使用水印来阻止人们复制东西，那么任何有一点点DOM知识的人都可以绕过它。我知道我为所有这些＆＃34;我们检测到您正在使用广告拦截器模式＆＃34;一些网站弹出。

Answer 2

建立mgraham's answer，您可以在图表的内部svg元素中添加文本元素。

d3.select(chart.internal.config.bindto).select("svg")
    .append("text")
    .text(text)
    .attr("y","50%")
    .attr("x","50%")
    .style("fill", "grey")
    .style("font-size", "50")
    .attr("alignment-baseline", "middle")
    .attr("text-anchor", "middle")

将水印添加到c3.js图表

2 个答案: