Fatal编程技术网
  • javascript/
  • Javascript 如何更改D3矩形中现有的html文本？

Javascript 如何更改D3矩形中现有的html文本？

javascript d3.js

Javascript 如何更改D3矩形中现有的html文本？,javascript,d3.js,Javascript,D3.js,如何通过单击按钮将D3矩形中现有的html文本更改为其他文本。在D3矩形的右上角有一个图像。当我点击该图像时，rect中的文本必须更改为另一个html文本，就像这是新文本一样。如果有人能帮我想出一个办法，那就太好了 <!DOCTYPE html> <html> <head> <!-- <script data-require="d3@3.5.3" data-semver="3.5.3&qu

如何通过单击按钮将D3矩形中现有的html文本更改为其他文本。在D3矩形的右上角有一个图像。当我点击该图像时，rect中的文本必须更改为另一个html文本，就像这是新文本一样。如果有人能帮我想出一个办法，那就太好了

<!DOCTYPE html>
<html>

<head>
  <!-- <script
      data-require="d3@3.5.3"
      data-semver="3.5.3"
      src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"
    ></script> -->
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>

<body>
  <script>
    function wrap(text, width) {
      text.each(function () {
        var text = d3.select(this),
          words = text.text().split(/\s+/).reverse(),
          word,
          line = [],
          lineNumber = 0,
          lineHeight = 1.1, // ems
          y = text.attr('y'),
          x = text.attr('x')
        dy = parseFloat(text.attr('dy')),
          tspan = text
          .text(null)
          .append('tspan')
          .attr('x', x)
          .attr('y', y)
          .attr('dy', dy + 'em');
        while ((word = words.pop())) {
          line.push(word);
          tspan.text(line.join(' '));
          if (tspan.node().getComputedTextLength() > width) {
            line.pop();
            tspan.text(line.join(' '));
            line = [word];
            tspan = text
              .append('tspan')
              .attr('x', x)
              .attr('y', y)
              .attr('dy', ++lineNumber * lineHeight + dy + 'em')
              .text(word);
          }
        }
      });
    }

    var svg = d3
      .select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 5000);

    // var longText =
    //   'This is very very long text. This is very very long text. This is very very long text. This is very very long text. This is very very long text. This is very very long text.';

    var longText =
      '<span>This is very very long textThis is very very long textThis is very very long textThis is very very long text</span>';

    var totHeight = 0;

    drawRect();

    function drawRect() {
      //var someWidth = randomIntFromInterval(40, 300);
      var someWidth = 212;

      var g = svg
        .append('g')
        .attr('transform', 'translate(20,' + totHeight + ')');

      var rect = g
        .append('rect')
        .style('fill', 'steelblue')
        .attr('x', 50)
        .attr('y', 50)
        .attr('width', someWidth)
        .attr('height', 1);

      var txt = g
        .append('text')
        .html(longText)
        .attr('x', 70)
        .attr('y', 70)
        .attr('dy', '.71em')
        .style('fill', 'black')
        .call(wrap, someWidth - 28);

      var img = g.append('svg:image')
        .attr('x', 250)
        .attr('y', 40)
        .attr('width', 24)
        .attr('height', 24)
        .attr(
          'xlink:href',
          './img/edit-24-px.svg'
        );

        img.on('click', function () {
        //d3.append('text').html("<span> bye </span>");
        console.log('hi');
        
        });  

      var height = txt.node().getBBox().height + 25;
      totHeight += height + 10;
      rect.attr('height', height);
    }
  </script>
</body>

</html>


函数换行（文本、宽度）{
text.each（函数（）{
变量文本=d3。选择（此），
words=text.text（）.split（/\s+/）.reverse（），
单词
行=[]，
行号=0，
线宽=1.1，//ems
y=text.attr（'y'），
x=text.attr（'x'）
dy=parseFloat（text.attr（'dy'）），
tspan=文本
.text（空）
.append（'tspan'）
.attr（'x'，x）
.attr（'y'，y）
.attr（'dy'，dy+'em'）；
while（（word=words.pop（））{
行。推（字）；
tspan.text（line.join（“”））；
if（tspan.node（）.getComputedTextLength（）>width）{
line.pop（）；
tspan.text（line.join（“”））；
行=[字]；
tspan=文本
.append（'tspan'）
.attr（'x'，x）
.attr（'y'，y）
.attr（'dy'，++lineNumber*lineHeight+dy+'em'）
.文本（字）；
}
}
});
}
var svg=d3
.选择（'正文'）
.append（'svg'）
.attr（'width'，500）
.attr（'高度'，5000）；
//var长文本=
//"这是一篇很长的文章。这是非常非常长的文本。这是非常非常长的文本。这是非常非常长的文本。这是非常非常长的文本。这是非常非常长的文本。”；
var长文本=
“这是非常非常长的文本这是非常非常长的文本这是非常非常长的文本这是非常非常长的文本”；
var totHeight=0；
drawRect（）；
函数drawRect（）{
//var someWidth=randomIntFromInterval（40300）；
var-someWidth=212；
var g=svg
.append（'g'）
.attr（'transform'，'translate（20'，+tothheight+'））；
var rect=g
.append（'rect'）
.style（'fill'、'steelblue'）
.attr（'x'，50）
.attr（'y'，50）
.attr（'width'，someWidth）
.attr（“高度”，1）；
var txt=g
.append（'文本'）
.html（长文本）
.attr（'x'，70）
.attr（'y'，70）
.attr（'dy'，'.71em'））
.style（'填充'，'黑色'）
.呼叫（包裹，someWidth-28）；
var img=g.append（'svg:image'）
.attr（'x'，250）
.attr（'y'，40）
.attr（'width'，24）
.attr（'height'，24）
艾特先生(
'xlink:href'，
“./img/edit-24-px.svg”
);
img.on（'click'，函数（）{
//d3.追加（'text'）.html（“再见”）；
console.log（'hi'）；
});  
var height=txt.node（）.getBBox（）.height+25；
总高度+=高度+10；
矩形属性（“高度”，高度）；
}

我无法将图像添加到JSFIDLE。

这应该可以



img.on('click', function () {
        txt.text('this is new text')   
        });
或者对于innerHTML：

img.on('click', function () {
        txt.html('this is new text')   
        });
请记住，不能在SVG文本中使用传统HTML。请看这里：

使用SVG中的标记添加文本。然后可以使用d3的.text方法将copy添加到文本标记中。你能给我一个关于如何在点击图片时更改此文本的代码示例吗<代码>img.on（'click'，函数（）{}）感谢您提供上述代码片段。上述措施效果良好。我面临的唯一问题是，当我尝试
txt.html（“这是新文本”）
时，它似乎不起作用。您是否试图将其包装？因此，文本不仅仅是纯文本。它也嵌入了html。代码中有一个warp函数，它似乎工作得很好。SVG文本不能这样做。你想完成什么？为什么需要添加跨距？文本不允许使用Tspan。在这里阅读：这会起作用吗？如果您能看看我提供的代码片段，并建议我需要对代码进行哪些修改才能使其正常工作，那就太好了。这将非常有帮助，因为我对这些SVG和D3概念还不熟悉。