用d3.js填充的半圆

Question

我试着用d3.js创建一个半圆，让它看起来像this。我没有找到任何如何做到这一点的例子。如何在d3.js中做到这一点？

Answer 1

是的，您可以使用SVG gradient来做到这一点。您所要做的就是定义它，然后使用它作为圆的填充。

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

Answer 2

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

在标签中使用两个圆圈，一个在另一个圆圈上。用你想要的颜色填充一个，用白色填充另一个，或者可能是你的背景颜色，让它看起来像是空的。然后使用矩形裁剪后一个圆，分配比前一个圆小几个像素的半径。将剪辑路径放在左上角..将宽度指定为圆的直径，高度将由您的数据定义。数据将与填充可逆，因此您可以从最大值中减去实际数据。例如:如果数据是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>