用d3.js填半圈

Question

我试图用d3.js创建一个半满的圆圈,就像这样.我没有找到任何如何做的例子.如何用d3.js完成？

Answer 1

是的,你可以用SVG渐变来做到这一点.您所要做的就是定义它,然后将其用作圆的填充.

var grad = svg.append("defs").append("linearGradient").attr("id", "grad")
              .attr("x1", "0%").attr("x2", "0%").attr("y1", "100%").attr("y2", "0%");
grad.append("stop").attr("offset", "50%").style("stop-color", "lightblue");
grad.append("stop").attr("offset", "50%").style("stop-color", "white");

svg.append("circle")
   .attr("fill", "url(#grad)");

JS 在这里.