如何將標籤添加到d3.js中的和絃圖的圓弧中

這是我的d3.js版本4（基於v3中的this chart）的和絃圖。你可以運行它，或只是看看圖片：如何將標籤添加到d3.js中的和絃圖的圓弧中

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
 
    <title>Chord Diagramm</title> 
 

 
    <!-- D3.js --> 
 
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script> 
 
    <!-- Google Fonts --> 
 
    <link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'> 
 
    <!-- bootstrap 4(!) --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
    <style> 
 
     body { 
 
     font-size: 12px; 
 
     font-family: 'Lato', sans-serif; 
 
     text-align: center; 
 
     fill: #2B2B2B; 
 
     cursor: default; 
 
     } 
 

 
     @media (min-width: 600px) { 
 
     #chart{ 
 
      font-size: 16px; 
 
     } 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <h1> Chord Diagramm </h1> 
 
    <div id = "chart"></div> 
 
    </body> 
 

 
    <script> 
 
    //////////////////////////////////////////////////////////// 
 
    //////////////////////// Set-Up //////////////////////////// 
 
    //////////////////////////////////////////////////////////// 
 

 
    var margin = {left:90, top:90, right:90, bottom:90}, 
 
    width = 1000 - margin.left - margin.right, // more flexibility: Math.min(window.innerWidth, 1000) 
 
    height = 1000 - margin.top - margin.bottom, // same: Math.min(window.innerWidth, 1000) 
 
    innerRadius = Math.min(width, height) * .39, 
 
    outerRadius = innerRadius * 1.1; 
 

 
    var names = ["Test1","Test2","AMO-DB","YouTube","Twitter", "Google+", "Pflegeratgeber" ,"O-Mag","RuV"], 
 
    colors = ["#301E1E", "#083E77", "#342350", "#567235", "#8B161C", "#DF7C00"], 
 
    opacityDefault = 0.8; 
 

 
    var matrix = [ 
 
    [0,1,1,1,1,1,1,1,1], //Test1 
 
    [0,0,1,1,1,1,1,0,1], //Test2 
 
    [0,1,0,1,1,1,1,1,1], //Hawkeye 
 
    [0,1,1,0,1,1,0,1,1], //The Hulk 
 
    [0,1,1,1,0,1,1,1,1], //Iron Man 
 
    [0,1,1,1,1,0,1,1,1], 
 
    [0,1,1,1,1,1,0,1,1], //Iron Man 
 
    [0,1,1,1,1,1,1,0,1], 
 
    [0,1,1,1,1,1,1,0,0] //Thor //Thor 
 
    ]; 
 

 
    //////////////////////////////////////////////////////////// 
 
    /////////// Create scale and layout functions ////////////// 
 
    //////////////////////////////////////////////////////////// 
 

 
    var colors = d3.scaleOrdinal() 
 
     .domain(d3.range(names.length)) 
 
    .range(colors); 
 

 
    var chord = d3.chord() 
 
    .padAngle(.15) 
 
    .sortChords(d3.descending) 
 

 
    var arc = d3.arc() 
 
    .innerRadius(innerRadius*1.01) 
 
    .outerRadius(outerRadius); 
 

 
    var path = d3.ribbon() 
 
    .radius(innerRadius); 
 

 
//////////////////////////////////////////////////////////// 
 
////////////////////// Create SVG ////////////////////////// 
 
//////////////////////////////////////////////////////////// 
 

 
var svg = d3.select("#chart").append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")") 
 
    .datum(chord(matrix)); 
 

 
//////////////////////////////////////////////////////////// 
 
////////////////// Draw outer Arcs ///////////////////////// 
 
//////////////////////////////////////////////////////////// 
 

 
var outerArcs = svg.selectAll("g.group") 
 
    .data(function(chords) { return chords.groups; }) 
 
    .enter().append("g") 
 
    .attr("class", "group") 
 
    .on("mouseover", fade(.1)) 
 
    .on("mouseout", fade(opacityDefault)) 
 

 
    // text popups 
 
    .on("click", mouseoverChord) 
 
    .on("mouseout", mouseoutChord); 
 

 
outerArcs.append("path") 
 
    .style("fill", function(d) { return colors(d.index); }) 
 
    .attr("d", arc); 
 

 
//////////////////////////////////////////////////////////// 
 
////////////////////// Append names //////////////////////// 
 
//////////////////////////////////////////////////////////// 
 

 
//Append the label names on the outside 
 
outerArcs.append("text") 
 
    .each(function(d) { d.angle = (d.startAngle + d.endAngle)/2; }) 
 
    .attr("dy", ".35em") 
 
    .attr("class", "titles") 
 
    .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) 
 
    .attr("transform", function(d) { 
 
    return "rotate(" + (d.angle * 180/Math.PI - 90) + ")" 
 
    + "translate(" + (outerRadius + 10) + ")" 
 
    + (d.angle > Math.PI ? "rotate(180)" : ""); 
 
    }) 
 
    .text(function(d,i) { return names[i]; }); 
 

 

 
//////////////////////////////////////////////////////////// 
 
////////////////// Draw inner chords /////////////////////// 
 
//////////////////////////////////////////////////////////// 
 

 
svg.selectAll("path.chord") 
 
    .data(function(chords) { return chords; }) 
 
    .enter().append("path") 
 
    .attr("class", "chord") 
 
    .style("fill", function(d) { return colors(d.source.index); }) 
 
    .style("opacity", opacityDefault) 
 
    .attr("d", path); 
 

 
//////////////////////////////////////////////////////////// 
 
////////////////// Extra Functions ///////////////////////// 
 
//////////////////////////////////////////////////////////// 
 

 
function popup() { 
 
    return function(d,i) { 
 
    console.log("love"); 
 
    }; 
 
}//popup 
 

 
//Returns an event handler for fading a given chord group. 
 
function fade(opacity) { 
 
    return function(d,i) { 
 
    svg.selectAll("path.chord") 
 
     .filter(function(d) { return d.source.index != i && d.target.index != i; }) 
 
    .transition() 
 
     .style("opacity", opacity); 
 
    }; 
 
}//fade 
 

 
    //Highlight hovered over chord 
 
function mouseoverChord(d,i) { 
 

 
    //Decrease opacity to all 
 
    svg.selectAll("path.chord") 
 
    .transition() 
 
    .style("opacity", 0.1); 
 
    //Show hovered over chord with full opacity 
 
    d3.select(this) 
 
    .transition() 
 
     .style("opacity", 1); 
 

 
    //Define and show the tooltip over the mouse location 
 
    $(this).popover({ 
 
    //placement: 'auto top', 
 
    title: 'test', 
 
    placement: 'right', 
 
    container: 'body', 
 
    animation: false, 
 
    offset: "20px -100px", 
 
    followMouse: true, 
 
    trigger: 'click', 
 
    html : true, 
 
    content: function() { 
 
     return "<p style='font-size: 11px; text-align: center;'><span style='font-weight:900'>" + 
 
      "</span> text <span style='font-weight:900'>" + 
 
      "</span> folgt hier <span style='font-weight:900'>" + "</span> movies </p>"; } 
 
    }); 
 
    $(this).popover('show'); 
 
} 
 
//Bring all chords back to default opacity 
 
function mouseoutChord(d) { 
 
    //Hide the tooltip 
 
    $('.popover').each(function() { 
 
    $(this).remove(); 
 
    }) 
 
    //Set opacity back to default for all 
 
    svg.selectAll("path.chord") 
 
    .transition() 
 
    .style("opacity", opacityDefault); 
 
    }  //function mouseoutChord 
 
    </script> 
 
</html>

我試圖按照這個例子：http://bl.ocks.org/syntagmatic/9eadf19bd2976653fa50，也發現了類似的主題在這裏：d3.js Add labels in Chord diagram

然而，我無法將我的頭圍繞如何將其整合到我的代碼中。任何幫助真的很感激。

來源

2017-04-06 Amir Rahbaran

我們可以接近這樣的：

添加id的路徑，而您是根據它在哪個組追加他們

outerArcs.append("path") 
    .style("fill", function(d) { return colors(d.index); }) 
    .attr("id", function(d, i) { return "group" + d.index; }) //add id here 
    .attr("d", arc);

追加的文本。直接輸入path，然後使用textpath，將其置於如下所示的圓弧內：

outerArcs.append("text") 
    .attr("x", 6) 
    .attr("dy", 15) 
    .append("textPath") 
    .attr("xlink:href", function(d) { return "#group" + d.index; }) 
    .text(function(chords, i){return names[i];}) 
    .style("fill", "white");

工作代碼在這裏 - https://jsfiddle.net/rjonean4/

來源

2017-04-06 19:49:12 sparta93

太謝謝你了！只需一個簡短的後續問題/註釋：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href states xlink已被棄用。我只保留了'''href'''，它似乎也能工作。 –

最後說明：如何將文本居中？感謝你的幫助：） –

如何將標籤添加到d3.js中的和絃圖的圓弧中

回答

相關問題