d3 c3：将svg元素添加到c3图表中

Question

我正在尝试将svg元素放在c3图表上，使其与其中一个刻度线水平对齐。

请参阅此处的小提琴：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>