svg - 對齊圓弧外的文字d3js

-3

有人可以幫助我使用d3js創建下面的圖像。我可以根據需要創建餅圖，但堅持使用箭頭和全部渲染外部文本。svg - 對齊圓弧外的文字d3js

由於知道的我已經實現了使用下面的代碼創建圈子。

var svg = d3.select("svg"); 
var margin = {top: 40, right: 45, bottom: 30, left: 40}; 
console.log(svg); 
var width = svg.attr('width'); 

var height = svg.attr('height'); 


var radius = Math.min(width, height)/2; 
var g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
var hoverStyle = { 
    zindex: '2px' 
}; 

var hoverExitStyle = { 
    zindex: "0px" 
} 

var animateSpeed = 500; 

// Define a Pie 
var pie = d3.pie() 
    .sort(null) 
    .value(function(d) {return d.number}); 

// define pie section 
var path = d3.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(0); 

// 
var label = d3.arc() 
    .outerRadius(radius - 40) 
    .innerRadius(radius - 40); 

// Get pie sections based on the data. 
var pieSections = pie(data); 

var arc = g.selectAll('.arc') 
    .data(pieSections) 
    .enter().append("g") 
    .attr("class", "arc") 
    .append('a') 
    .attr("href", function(d) { return d.data.url; }); 

arc.append("path") 
    .attr("d", path).transition() 
    .attr("fill", function(d) { return d.data.color; }); 

arc.append("text") 
    .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; }) 
    .attr("dy", "0.35em") 
    .text(function(d) { return d.data.title; });

來源

2017-08-28 Shubham

肯定有很多人能夠並願意幫助你，如果你相應地支付他們。如果你想從Stack Overflow社區獲得免費的幫助，請花點時間學習[問]以及如何提供[mcve]。本網站的規則要求您展示自己的努力並至少提供代碼的相關部分。 – altocumulus

我會照顧未來的所有規則，並請接受我的道歉，如果我在這裏做錯了。這是我在stackoverflow中詢問的第一個問題。 – Shubham

OP可能不知道這些東西都是多少工作（曲線文本和箭頭）;他們可能甚至不知道他們應該尋找的谷歌條款。 @Shubham，如果你以不同的方式表達它，那麼你將不會捕捉到更多的高音......即「我將如何去製作這樣的曲線標籤？」你說這句話的方式是「爲我做這兩件難事」。總是提出問題的意圖學習，而不是讓某人給你一個解決方案 - 前者幫助每個人，而後者會讓每個人都受到傷害，包括你。 – yasashiku

文本和箭頭是兩個獨立的問題，可能值得自己的問題。

弧形文本 要與D3的路徑上做的文字，你可能想看看textpath文檔。這將會有點棘手;基本上，你會想要創建第二個d3.arc()發電機具有稍長的外半徑。使用較長的設置path元素d屬性（即你需要創建）SVG的defs對象的內部，並從textpath元素（你還需要創建）引用這些path元素的id秒。

彎箭頭 要做到這一點酷似圖像，你可能會需要一些人工建築（包括找出數學！）的d的屬性自己添加相應的箭頭（見SVG路徑syntax）。如果您正在製作靜態圖片，則創建線條（使用更長半徑的d3.arc()生成器）可能會更快，並將類似SVG crowbar的SVG導出到Illustrator或Inkscape等繪圖程序中，然後添加那裏有箭頭。

來源

2017-08-28 21:06:43 yasashiku

svg - 對齊圓弧外的文字d3js

回答

相關問題