如何將文本追加到c3.js區域？

Question

我如何才能append text to c3.js regions?我在我的圖表中有three regions，我想append three different texts給他們。到目前爲止，我曾嘗試使用d3.js但沒有成功

var rectOffset = ((d3.select(this).attr("x")) * 1) + 25; 


d3.selectAll(".c3-region-0 rect") 
.append("text") 
.text("Some Text") 
.attr("dy","15px") 
.attr("dx",rectOffset+"px") 

我得到一個錯誤

類型錯誤：在Array.d3_selectionPrototype.attr無法讀取空 的特性「的getAttribute」（d3.js ：578）

jsfiddle

代碼：

var chart = c3.generate({ 
     bindto: '#chart', 
    data: { 
     x: 'x', 
     columns: [ 
     ["x", "2016-01-04", "2016-01-05", "2016-01-06", "2016-01-07", "2016-01-08", "2016-01-09", "2016-01-10", "2016-01-11", "2016-01-12", "2016-01-13", "2016-01-14", "2016-01-15", "2016-01-16", "2016-01-17", "2016-01-18", "2016-01-19", "2016-01-20", "2016-01-21", "2016-01-22", "2016-01-23", "2016-01-24", "2016-01-25", "2016-01-26", "2016-01-27", "2016-01-28", "2016-01-29", "2016-01-30", "2016-01-31", "2016-02-01", "2016-02-02", "2016-02-03"], 
     ["Democrates", 49.85, 49.89, 49.82, 49.51, 49.42, 49.33, 49.24, 49.64, 49.57, 49.57, 49.01, 48.67, 48.7, 48.7, 48.7, 48.63, 48.63, 48.63, 48.63, 48.63, 48.61, 48.61, 48.68, 48.76, 48.84, 48.73, 48.76, 48.79, 48.81, 49.68, 49.63], 
     ["Republicans", "50.15", "50.11", "50.18", "50.49", "50.58", "50.67", "50.76", "50.36", "50.43", "50.43", "50.99", "51.33", "51.30", "51.30", "51.30", "51.37", "51.37", "51.37", "51.37", "51.37", "51.39", "51.39", "51.32", "51.24", "51.16", "51.27", "51.24", "51.21", "51.19", "50.32", "50.37"] 
     ], 
     colors: { 
      Democrates: '#4575b4', 
      Republicans: '#d73027' 
     }, 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      max: '2016-11-08', 
      tick: { 
       values: ["2016-02-01", "2016-06-14", "2016-11-08", "2016-09-26", "2016-10-19", "2016-07-18", "2016-07-28" ], 
       format: function (x) { 
        if (x == "Mon Feb 01 2016 00:00:00 GMT+0100 (CET)"){ 
        return 'Feb 01' + 'Primaries and Caucuses ' 
       } else if (x == "Tue Nov 08 2016 00:00:00 GMT+0100 (CET)") { 
        return 'Nov 08 Election Day' 

       } else if (x == "Mon Sep 26 2016 00:00:00 GMT+0200 (CEST)") { 
        return ' Sep 26 Start of Presidential Debates' 

       } else if (x == "Mon Jul 18 2016 00:00:00 GMT+0200 (CEST)") { 
        return 'Jul 25 Announcement of Nominees' 

       } else { 
        var format= d3.time.format("%b %d"); 
           var date = format(x) 
           return date 
       }}, 
       fit: false 
     } 
     } 
    }, 
    grid: { 
    y: { 
     lines: [ 
       {value: 50}, 

      ] 
    }, 
    x: { 
    lines: [ 
     {value: "2016-01-08", text: "Want to rorate this text in 180 degrees", 
     class: "xLineLable", position: "end"} 


    ] 
    } 

    }, 
    regions: [ 

     {axis: 'x', start: "2016-02-01", end: "2016-06-14", class: 'regionX'}, 
     {axis: 'x', start: "2016-07-18", end: "2016-07-28", class: 'regionX'}, 
     {axis: 'x', start: "2016-09-26", end: "2016-10-19", class: 'regionX'} 

    ] 
}); 

Answer 1

您不能將文本添加到矩形，您需要將其添加爲c3-region組元素下的同胞元素，這在d3中有點痛苦（並且rectoffset必須是函數，或者d3.select（this）獲取最高級別​​的dom節點）。在rectOffset中，我選擇文本的parentNode，然後抓住它的rect子節點。

有幾個其他的陷阱，停止了文字轉起來，我沒有想到.. attr總是返回一個字符串，所以.attr（x）+25將返回「75」+25 - > 7525，需要使用'+'投射到一個數字......我最終使用了文本錨。此外，即使在正確的位置，仍需要調整文本的填充不透明度。這讓我有一段時間不知所措。

var rectOffset = function() { return +d3.select(this.parentNode).select("rect").attr("x"); }; 


d3.selectAll(".c3-region-0") 
.append("text") 
.text("Some Text") 
.attr("dy","15") 
.attr("dx",rectOffset) 
.style("fill-opacity", 1) 
.attr("text-anchor", "start") 
; 

http://jsfiddle.net/yrzxj3x2/35/