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>

​