d3 c3：向c3圖表添加svg元素

Question

我試圖在c3圖表上放置一個svg元素，使其與刻度線之一水平對齊。

見小提琴這裏：https://jsfiddle.net/4sw82k1z/3/

比如，我喜歡紅色的標籤上面的刻度標記「1」和綠色標籤上面的刻度線居中居中「3」。

我是新來的d3世界。我試圖做到這一點的方式是絕對座標，當小提琴的'html'窗格被調整大小時失敗。要了解我的意思，請點擊拖動'html'窗口的大小。

var rightlabel = d3.select("#chart svg") 
.append("svg").attr("width", 1200).attr("height", 50) //container for txt 
.append("text").text("i'm a label in the green region") //text element 
.style("fill", "green").attr("transform","translate(400,20)"); 

實現此目的的正確方法是什麼？

Answer 1

掛鉤重繪的事件並重新定位標籤。您也可以根據一些c3的內部設定的位置正確：

var chart = c3.generate({ 
 
    data: { 
 
     columns: [ 
 
      ['data1', 100, 250, 100, 300, 75], 
 
      ['data2', 60, 500, 250, 450, 300], 
 
     ] 
 
    }, 
 
    onresized: function() { 
 
     setTimeout(updateLabels, 200); 
 
    } 
 
}); 
 

 

 
var rightlabel = d3.select("#chart svg g") 
 
     .append("text") 
 
     .text("i'm a label in the green region").style("fill", "green") 
 
     .attr("transform","translate(" + (chart.internal.x(3)) + ",20)") 
 
     .style("text-anchor","middle"); 
 
     
 
var leftlabel = d3.select("#chart svg g") 
 
    .append("text") 
 
    .text("i'm a label in the red region").style("fill", "red") 
 
    .attr("transform","translate(" + (chart.internal.x(1)) + ",20)") 
 
    .style("text-anchor","middle"); 
 

 
function updateLabels(){ 
 
    rightlabel.attr("transform","translate(" + chart.internal.x(3) + ",20)"); 
 
    leftlabel.attr("transform","translate(" + chart.internal.x(1) + ",20)"); 
 
} 
 

 
chart.regions.add([{axis: 'x', end: 2, class: 'c3-region-r'},{axis: 'x', start: 2, class: 'c3-region-gr'}]);

.c3-region-gr{ 
 
    fill: green; 
 
    fill-opacity: 0.1; 
 
} 
 

 
.c3-region-r{ 
 
    fill: red; 
 
    fill-opacity: 0.1; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/> 
 
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script> 
 
<div id="chart"></div>