D3.js добавить TSPAN к текстовому элементу

Question

У меня есть гистограмма D3. При наведении курсора мыши на одну из полос появляется текст.

Но я бы хотел, чтобы появилась еще одна строка текста. Для этого мне нужно добавить элемент .

Я видел примеры, но не могу заставить добавить к текстовому элементу.

График здесь, и полный код на GitHub.

добавляется "текст" и "tspan",

  g.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .style("fill", function(d) {
            return colorScale(d.intensity);
        })
        .attr("class", "bar")
        .attr("x", function(d) {
            return x(d.date);
        })
        .attr("y", function(d) {
            return y(d.distance);
        })
        // .attr("width", x.bandwidth())
        .attr("width", function(d) {
            return dur(d.duration);
        })
        // .attr("width", 6)
        .attr("height", function(d) {
            return height - y(d.distance);
        })
        .on("mouseover", handleMouseOver)
        .on("mouseout", handleMouseOut);

    t = g.append('text')
        .attr('x', 9)
        .attr('dy', '.35em');

    ts = g.append('tspan')
        .attr('x', 9)
        .attr('dy', '.35em');

Функция JS handleMouseOver

  function handleMouseOver(d) {
    d3.select(this)
        .style("fill", "lightBlue")
    g.select('text')
        .attr("x", x(d.date) + dur(d.duration + 5))
        .attr("y", y(d.distance) + 10)
        .text(d.distance + "m");
    ts.text("blah")
        .attr("x", x(d.date) + dur(d.duration + 5))
        .attr("y", y(d.distance) + 30);
}

Answer 1

Попробуйте следующее:

Добавить:

t = g.append('text')
        .attr('x', 9)
        .attr('dy', '.35em');

ts = g.append('tspan')
        .attr('x', 9)
        .attr('dy', '.35em');

а затем на hanldeMouseOver:

ts.text("blah")
    .attr("x", ...)
    .attr("y", ...);

Answer 2

Я получил это, добавив tspan в функцию,

function handleMouseOver(d) {
    d3.select(this)
        .style("fill", "lightBlue")
    g.select('text')
        .attr("x", x(d.date) + dur(d.duration + 5))
        .attr("y", y(d.distance) + 10)
        .text(d.distance + "m")
        .append('tspan')
        .text(d.number)
        .attr("x", x(d.date) + dur(d.duration + 5))
        .attr("y", y(d.distance) + 30)
        .append('tspan')
        .text(d.date)
        .attr("x", x(d.date) + dur(d.duration + 5))
        .attr("y", y(d.distance) + 50);
}

Там нет tspan в другом месте.

Рабочий пример здесь

Спасибо