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>