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

JSfiddle在这里。

Answer 2

对于这个简单的任务，您甚至可能不需要 d3。您可以使用这个简单的技术，在圆圈上使用 Clippath，我已经在我的博客http://anilmaharjan.com.np/blog/2013/11/create-filled-circle-to-visualize-data-中详细编写了它使用-svg

在标签中使用两个一个在另一个之上的圆圈。用你想要的颜色填充一个，另一个用白色填充，或者可能是你的背景颜色，只是为了让它看起来像空的。然后使用其中的矩形剪辑后面的一个，指定半径比前面的圆少几个像素。将剪辑路径放在左上角.. 指定宽度等于圆的直径，高度将由您的数据定义。数据将对填充可逆，因此您可以从最大值中减去实际数据。EG：如果数据是 20/100 做 100-20 所以你会这样得到 80，空的部分是 80，填充的部分是 20。

您可以在高度或宽度之间切换以在垂直或水平填充轴之间切换。

HTML 应如下所示。

<svg height="200"> <a transform="translate(100,100)">
    <g>
      <circle fill="#f60" r="50"></circle>
    </g>
    <g>
      <clippath id="g-clip">
       <rect height="50" id="g-clip-rect" width="100" x="-50" y="-50">
       </rect>
      </clippath>
      <circle clip-path="url(#g-clip)" fill="#fff" r="47"></circle>
    </g>
  </a>
</svg>

我创建了一个 jsfiddle 来说明这一点：http: //jsfiddle.net/neqeT/2/

Answer 3

创建一个 id 名称为 id_cirlce 的 div 并将此代码粘贴到脚本标记中

<div id="id_circle"></div>

<script>
var svg = d3.select("#id_circle")
         .append("svg")
         .attr("width",250)
         .attr("height",250);

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("r",50)
         .attr("cx",60)
         .attr("cy",60)
         .style("stroke","black")
         .style("fill","url(#grad)");

</script>