垂直弧使用D3.js

如何使用D3沿svg的y軸（垂直軸）繪製半圓弧？這裏是什麼，我想實現target 垂直弧使用D3.js

這裏是我到目前爲止的代碼的圖像： -

var canvas = d3.select("body").append("svg") 
      .attr("width",width) 
       .attr("height",height); 

var group = canvas.append("g") 
     .attr("transform","translate(0,200)"); 

var origin = d3.svg.arc() 
      .outerRadius(50) 
      .innerRadius(0) 
      .startAngle(-1.5755) 
      .endAngle(1.5755); 

var arcs1 = group.append('g') 
     .attr('class','arc') 
     .attr("transform","translate(50,0)"); 

var yAxis = group.append("line") 
      .attr("transform","translate(50,0)") 
      .attr("x1", 0) 
        .attr("y1", -200) 
        .attr("x2", 0) 
        .attr("y2", height) 
        .attr("stroke-width", 2) 
        .attr("stroke", "black");

來源

2014-07-24 user3873357

[此示例]（http://bl.ocks.org/cmdoptesc/6226150）可能會有所幫助。 –

當您製作d3弧線時，角度0代表圓圈的頂部。因此，爲了使像在圖像顯示的一個弧形，你會想你的開始角度爲0和您的最終角度是中途繞一大圈，這是皮弧度：

var arc = d3.svg.arc() 
    .outerRadius(50) 
    .innerRadius(0) 
    .startAngle(0) 
    .endAngle(Math.PI);

至於定位您的弧，您可以使用svg轉換將弧的原點轉換爲您想要的位置。

svg.append('path') 
    .attr('transform', 'translate(0,' + h/2 + ')') 
    .attr('d', arc);

HERE是一個演示：舉例來說，如果你的y軸具有高度h您可以在創建路徑元素的圓弧這樣翻譯原點到軸的中心。

來源

2014-07-24 15:12:54 jshanley

： - 你是如何將弧線塗成紅色的？你能分享一下代碼嗎？ – user3873357

檢查CSS選項卡。我給了路徑元素一類'arc' – jshanley

： - 謝謝你的回答。有沒有辦法使用我的數據集中的值來標記y軸上的點？我的數據集是'var data = [[2010,15]，[2010,30]，[2011,45]，[2011,20]]'。我需要將數據[i] [0]標記爲我的座標軸 – user3873357

首先，畫出喜歡你的目標弧你希望你的由startAngle在啓動0和endAngle將是3.14或Math.PI。

var origin = d3.svg.arc() 
     .outerRadius(50) 
     .innerRadius(0) 
     .startAngle(0) 
     .endAngle(Math.PI);

然後，只需將一個路徑追加到arcs1並使用您的原點函數來繪製它。

arcs1.append("path").attr("d", origin);

你可以看看現場演示http://jsfiddle.net/7EfS5/。

編輯要更改圓弧的顏色，您可以使用.attr（「補」，顏色）或.style（「補」，顏色）

arcs1.append("path").attr("d", origin) 
        .attr("fill", "red");

希望這個幫助。

來源

2014-07-24 15:11:08

： - 我如何填充顏色到弧？ – user3873357

在'path'元素上使用'.attr（'fill'，'red'）'，或者給它一個類似'.attr（'class'，'arc'）'的類，然後定位'.arc'類與你的CSS並給它一個填充屬性。 – jshanley

垂直弧使用D3.js

回答

相關問題