如何将文本附加到 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")

我收到一个错误

TypeError: 无法读取属性 'getAttribute' 的 null 在 Array.d3_selectionPrototype.attr (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

你不能将文本添加到 rect，你需要将它作为兄弟元素添加到 c3-region 组元素下，这在 d3 中有点痛苦（并且 rectoffset 需要是函数，或者 d3.select(this) 获取顶级 dom 节点）。在 rectOffset I select 文本的 parentNode，然后抓取它的 rect 子节点。

有几个其他陷阱阻止了我没想到的文本出现.. attr 总是 returns 一个字符串所以 .attr(x)+25 会 return “ 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/

如何将文本附加到 c3.js 区域？

How to append text to c3.js Regions?

javascript

jquery

d3.js

c3.js