Vòng tròn đầy một nửa với d3.js

Question

Tôi đang cố tạo một vòng tròn đầy một nửa với d3.js giống như this. Tôi không tìm thấy bất kỳ ví dụ nào về cách thực hiện. Làm thế nào điều này có thể được thực hiện với d3.js?

Answer 1

Có, bạn có thể làm điều đó với số SVG gradient. Tất cả những gì bạn phải làm là xác định nó và sau đó sử dụng nó như điền vào vòng tròn.

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

Bạn thậm chí có thể không yêu cầu d3 cho tác vụ đơn giản này. Bạn có thể sử dụng kỹ thuật đơn giản này, Sử dụng Clippath trên một vòng tròn, tôi đã viết chi tiết trong blog của tôi http://anilmaharjan.com.np/blog/2013/11/create-filled-circle-to-visualize-data-using-svg

Sử dụng hai vòng tròn phía trên một vòng tròn khác trong thẻ. Điền một màu với màu bạn muốn và một màu khác với màu trắng hoặc có thể là màu nền của bạn để làm cho nó trông giống như trống rỗng của nó trong đó. Sau đó, clip sau này sử dụng với hình chữ nhật trong đó, gán bán kính vài pixel nhỏ hơn vòng tròn trước đó. Đặt đường dẫn clip ở trên cùng bên trái .. gán chiều rộng bằng đường kính của vòng tròn và chiều cao sẽ được xác định bởi dữ liệu của bạn. Dữ liệu sẽ có thể đảo ngược để lấp đầy để bạn có thể trừ dữ liệu thực tế khỏi giá thầu CPC EG: nếu dữ liệu là 20/100 làm 100-20 vì vậy bạn sẽ nhận được 80 theo cách này phần trống sẽ là 80 và được lấp đầy sẽ là 20.

Bạn có thể chuyển đổi giữa chiều cao hoặc chiều rộng để chuyển đổi giữa điền dọc hoặc ngang trục.

HTML sẽ giống như thế này.

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

tôi đã tạo ra một jsfiddle để minh họa điều này tại địa chỉ: http://jsfiddle.net/neqeT/2/

Answer 3

tạo một div có tên id id_cirlce và dán mã này bên trong thẻ 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>