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

【问题标题】：d3 c3: adding svg element to c3 chartd3 c3：将svg元素添加到c3图表
【发布时间】：2016-03-14 19:50:32
【问题描述】：

我正在尝试在 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)");

实现这一目标的正确方法是什么？

【问题讨论】：

标签： d3.js svg c3.js

【解决方案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>

【讨论】：

非常有用的东西。谢谢！