html - D3.js の div のトランジションとテキスト属性

Question

私はD3でいくつかの単純なテキストボックスを作成しようとしています.SOで別のq＆aを使用すると、foreignObjectを使用してテキストをdivでラップする必要があることがわかりました。それは大丈夫です。私がやりたいことは、他のものをクリックしてテキストを更新することです。テキスト自体は更新できますが、サイズや色は更新できません。それは正しくありません。これが私のコードです。

    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

//add some text for clicking
    svg.append("text")
    .attr("x", "260")
    .attr("y", "40")
    .attr("font-family","sans-serif")
    .attr("font-size", "18")
    .attr("fill", "black")
    .attr("id", "clickone")
    .text("Click this")
    ;      

//this is the foreignObject with the original text

       svg.append('foreignObject')
           .attr('x', 40)
           .attr('y', 100)
           .attr('width', 180)
           .attr('height', 100)
           .append("xhtml:body")
           .attr("id","words")
           .html('<div style="width: 160px;"><p>Old text old text old text old text old text old text<p></div>');

//and here's the click and transition                  

    svg.select("svg #clickone")
        .on("click", function() {

    svg.select('p')
    .transition()
    .delay(500)
    .text("new text new text new text new text new text")
    .attr("fill","red")
    .attr("font-size","20")

    })

;

その例では、テキストが更新され、トランジションが遅れますが、色とサイズは変わりません。CSS などはなく、コードだけです。私は何を間違っていますか？