Transitions and text attributes in a div in D3.js

Question

I am trying to make some simple text fields in D3 and use other q and a on SO I realized that I need to use foreignObject and wrap the text in a div. This is all wonderful. What I want to do is update the text by clicking one more thing. I can update the text itself, but not the size or color of it. This is not true. Here is my 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 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") }) 

;

So, in this example, text updates, transition delays, but the color and size are not changed. There is no CSS or nothing, just code. What am I doing wrong?

Answer 1

The <p> has no fill or font-size attribute. He has a CSS style attribute that you can use more or less the same and that you can change using transition.style

It might look like this:

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