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

中详细地写了它。

在标记中使用一个在另一个上面的两个圆圈。用你想要的颜色填充一个，用白色填充另一个颜色或者可能是你的背景颜色，只是为了让它看起来像是空的。然后使用矩形在其中剪辑后一个，指定半径比前一个圆少几个像素。将剪辑路径放在左上角..指定宽度等于圆的直径，高度将由您的数据定义。数据将对填充进行可逆操作，因此您可以从最大值中减去实际数据。 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>

用d3.js填半圈

3 个答案: