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

Question

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

请在此处查看 fiddle：https://jsfiddle.net/4sw82k1z/3/

例如，我希望红色标签在刻度线“1”上方居中，绿色标签在刻度线“3”上方居中。

我是 d3 世界的新手。我尝试实现此目的的方法是在绝对坐标中，当 fiddle 的 'html' 窗格被调整大小时，它会失败。要明白我的意思，请单击拖动 'html' window 的大小。

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>

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

d3 c3: adding svg element to c3 chart

svg

d3.js

c3.js