Les Transitions et les attributs de texte dans un div dans D3.js

Je suis en train de faire quelques simples zones de texte en D3, et en utilisant un autre q & a sur DONC j'ai compris que j'avais besoin d'utiliser la foreignObject et le texte à la ligne dans un div. C'est tout beau. Ce que je veux faire est de mettre à jour le texte en cliquant sur quelque chose d'autre. Je peux mettre à jour le texte lui-même, mais pas la taille ou la couleur de celle-ci. Qui peut ne pas être juste. Voici mon code.

    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")

    })

;

Donc, dans cet exemple, le texte des mises à jour, la transition des retards, mais la couleur et la taille ne change pas. Il n'y a pas de CSS ou quoi que ce soit, juste le code. Ce que je fais mal?

Avez-vous essayé .style() au lieu de .attr()?

OriginalL'auteur Tom MacInnes | 2013-08-05

  1. 5

    La <p> balise n'a pas un fill ou un font-size attribut. Il a un style css de l'attribut que vous pouvez utiliser pour faire plus ou moins la même chose et que vous pouvez changer avec de transition.style

    Cela pourrait ressembler à ceci:

    svg.select("svg #clickone").on("click", function() {
    svg.select('p')
    .transition()
    .duration(2500)
    .text("new text new text new text new text new text")
    .style("background-color","red")
    .style("font-size","20px")
});
    C'est fantastique, merci à vous deux

    OriginalL'auteur cyon