D3以编程方式附加html元素作为子元素

Question

我有一套内部的样式规则，必须使用以下格式：

.title span {
    many, many stylerules…
}

我正在使用d3从具有标题和链接的csv进行解析。最终结果是标题，该标题还用作指向外部页面的链接。相关代码如下：

...
var titleG = svg.append('g')
    .attr('transform', 'translate(' + margins.left + ',' + 0 + ')')
    .attr('class', 'title')
    .attr('text-anchor', 'middle');

var titleText = titleG
    .selectAll('text')
    .data([data], function(d) {
        return d.Event;
    });

titleText
    .enter()
    .append('text')
    .attr('x', width/2);

titleText
    .attr('y',100)
    .html(function(d) {return "<a href="+d.Url+">"+d.Event+"</a>"});

titleText
    .exit()
    .transition()
    .remove();

…

麻烦是我无法像小孩子一样附加跨度。我尝试将.append('span')放在中间（在.enter()之后和.exit()之前），但是没有任何显示，我无法检查其上的元素。

请参考最顶部的CSS代码，许多样式规则都会产生一种效果，用户将鼠标悬停在.title上，并且将范围从opacity:0过渡到opacity:1 innerHTML：“单击此处访问事件页面”。

问题：：如何使用d3以编程方式创建的<span>元素的子元素中添加.title，以便正确应用我的样式规则？