Question

我正在使用d3和roughjs绘制一些饼图。我绘制弧线，然后放一些文字，但文字没有“显示”。当页面加载时，文本会在屏幕右侧闪烁，但随后会被饼图覆盖。我寻找一些z-index，但我找不到解决方案。我错了什么？

调试时我也可以看到标签

这是代码

<!DOCTYPE html>
<meta charset="utf-8">
<canvas></canvas>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://roughjs.com/builds/rough.min.js"></script>
<script>

var twData = [{"concept" : "macri", "sentiment" : [0.1, 0.9]},
                            {"concept" : "paritarias", "sentiment" : [0.2, 0.8]},
                            {"concept" : "churros", "sentiment" : [0.7, 0.3]}];

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");
    rough = new RoughCanvas(canvas, 960, 500);

context.translate(width / 2, height / 2);
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "#000";
context.font="25px Verdana";

var width = canvas.width,
    height = canvas.height,
    radius = (Math.min(width, height) / 2) / twData.length;

rough.hachureGap = 1;
rough.strokeWidth = 0.5;
rough.fillWeight = 1;

var colors = ["#009933", "#800000"];

var labelArc = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40)
    .context(context);

var dx = (width/2)  / twData.length + 50;
        dy = (height/2) / twData.length;

for(k=0;k<twData.length;k++){

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

        // Arcs
        var arcs = pie(twData[k].sentiment);
        arcs.forEach(function(d, i) {
            var a = rough.arc(dx*(k+1), dy, radius * 2, radius * 2, d.startAngle - Math.PI/2, d.endAngle - Math.PI/2, true);
            a.fill = colors[i];
            //a.hachureAngle = Math.random() * 360;
        });

        // Labels
        arcs.forEach(function(d) {
              var c = labelArc.centroid(d);
              context.fillText(d.data, dx*(k+1)+c[0], dy+c[1]);
                    console.log("Agregando label " + d.data + " en (" + Math.round(dx*(k+1)+c[0]) + "," + Math.round(dy+c[1])+")");
          });
        context.fillText(twData[k].concept,dx*(k+1), dy+100)
        console.log("Agregando label " + twData[k].concept + " en (" + Math.round(dx*(k+1)) + "," + Math.round(dy+100)+")");

} //for
</script>

谢谢！

Answer 1

rough.js控制画布并根据自己的目的清除画布。我在this example的评论中找到了关键：

// since we are going to draw on canvas directly, i.e using context2d and not rough.js,
// we call requestAnimationFrame. This will prevent our drawing to be cleared by rough.js

因此，您的代码变为：

<!DOCTYPE html>
<meta charset="utf-8">
<canvas></canvas>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://roughjs.com/builds/rough.min.js"></script>
<script>
  var twData = [{
    "concept": "macri",
    "sentiment": [0.1, 0.9]
  }, {
    "concept": "paritarias",
    "sentiment": [0.2, 0.8]
  }, {
    "concept": "churros",
    "sentiment": [0.7, 0.3]
  }];

  var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");
  rough = new RoughCanvas(canvas, 960, 500);

  context.translate(width / 2, height / 2);
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillStyle = "#000";
  context.font = "25px Verdana";

  var width = canvas.width,
    height = canvas.height,
    radius = (Math.min(width, height) / 2) / twData.length;

  rough.hachureGap = 1;
  rough.strokeWidth = 0.5;
  rough.fillWeight = 1;

  var colors = ["#009933", "#800000"];

  var labelArc = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40)
    .context(context);

  var dx = (width / 2) / twData.length + 50;
  dy = (height / 2) / twData.length;

  for (k = 0; k < twData.length; k++) {

    var pie = d3.pie()
      .sort(null)
      .value(function(d) {
        return d;
      });

    // Arcs
    var arcs = pie(twData[k].sentiment);
    arcs.forEach(function(d, i) {
      var a = rough.arc(dx * (k + 1), dy, radius * 2, radius * 2, d.startAngle - Math.PI / 2, d.endAngle - Math.PI / 2, true);
      a.fill = colors[i];
      //a.hachureAngle = Math.random() * 360;
    });
  } //for
  
  
  window.requestAnimationFrame(function() {
    for (k = 0; k < twData.length; k++) {
      // Labels
      arcs.forEach(function(d) {
        var c = labelArc.centroid(d);
        context.fillText(d.data, dx * (k + 1) + c[0], dy + c[1]);
        console.log("Agregando label " + d.data + " en (" + Math.round(dx * (k + 1) + c[0]) + "," + Math.round(dy + c[1]) + ")");
      });
    context.fillText(twData[k].concept, dx * (k + 1), dy + 100)
    //console.log("Agregando label " + twData[k].concept + " en (" + Math.round(dx * (k + 1)) + "," + Math.round(dy + 100) + ")");
    }
  });
  
</script>

无法在HTML5画布上看到绘制的文本

1 个答案: