D3.js: Рисование прямоугольников под текстом

Question

Я работаю над радиальным складным деревом в использовании d3.js. Вот как это выглядит до сих пор: Как видно, красным цветом видно, что текст перекрывает ссылки. Я хочу, чтобы текст был «выделен» в фоновом цвете, так что ссылки не будут отображаться там, где текст.

До сих пор я попытался выделить текст, используя background-color в CSS и в формате .style().

.node text { 
background-color: yellow; 
    font: 12px sans-serif; 
    } 

Я также попытался нарисовать прямоугольник размера текста перед нанесением текста, как показано на Mike Босток-х bar chart. Тем не менее, когда я выполняю код, прямоугольников нигде не найти, даже в исходном коде с помощью инструмента разработчика хром (для кругов есть тег <circle>, но не тег прямоугольника).

См. Здесь JSFiddle часть кода. Я сделал прямоугольник желтым в CSS, чтобы видеть лучше, если он работает, хотя я не смог заставить его работать.

Код прямоугольников являются следующие:

.node rect { 
    fill: yellow; 
} 

nodeEnter.select("rect") 
     .attr("height", 15) 
     .attr("width", 200) 
     .attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50) + ")"; }) 
     //.style("fill","yellow") 
; 

и

nodeUpdate.select("rect") 
     .attr("height", 15) 
     .attr("width", 200) 
     .attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50) + ")"; }) 
     //.style("fill","yellow") 
; 

Answer 1

Вы должны append прямоугольник в выборе входа, не select ИНГ его:

nodeEnter.append("rect") 

Ваша любимая игра: https://jsfiddle.net/wLwn9p98/