使用d3.js创建半填充圆形

Question

我正在尝试使用d3.js创建半圆形，就像这个。 我没有找到如何实现的例子。 如何使用d3.js实现？

- baba-dev

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 链接。

- Lars Kotthoff

---

谢谢你的回答，这个方案很好用。对于我的需求，我还需要添加“stop-opacity”为0，因为我想让圆形的一半是透明的而不是白色的。希望能帮到其他人。 - baba-dev

Answer 2

您甚至不需要使用d3来完成这个简单的任务。您可以使用这个简单的技巧，在一个圆形上使用剪切路径，我在我的博客中详细介绍了它：http://anilmaharjan.com.np/blog/2013/11/create-filled-circle-to-visualize-data-using-svg 使用两个圆形，一个在另一个上面的标签中。 用您希望的颜色填充一个圆形，用白色或者您的背景颜色填充另一个圆形，以使其看起来像是里面是空的。 然后使用一个矩形在其中使用剪切路径剪切后面的圆形，将半径设为比前面的圆形小几个像素。 将剪切路径放置在左上角。将宽度分配为圆的直径，高度将由您的数据定义。 数据将对填充起到反向作用，因此您可以从最大值中减去实际数据。例如：如果数据是20/100，那么做100-20，这样空的部分将是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/

- Anil Maharjan

---

请提供一些文本，以防您的链接在以后更改。 - Robert

Answer 3

创建一个带有id为name_id_circle的div，并将以下代码粘贴在script标签中。

<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>

- V A S