D3.js 中 div 中的转换和文本属性答案

【问题标题】：Transitions and text attributes in a div in D3.jsD3.js 中 div 中的转换和文本属性
【发布时间】：2013-08-05 08:06:16
【问题描述】：

我正在尝试在 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 或任何东西，只有代码。我做错了什么？

【问题讨论】：

你试过.style()而不是.attr()吗？

标签： html text d3.js transition

【解决方案1】：

<p> 标签没有fill 或font-size 属性。它确实有一个 css 样式属性，你可以用它来做或多或少相同的事情，你可以用 transition.style 更改它

这可能看起来像这样：

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

【讨论】：