我如何使用D3/javascript访问和更改工具提示的连接文本中的变量

How can I access and change variable in concatenated text of tooltip using D3/javascript?

本文关键字：工具提示 连接 文本 变量 何使用 D3 访问 javascript      更新时间：2023-09-26

如何设置D3工具提示，以便我可以从变量(或只是JSON子)不同的样式文本块?

我创建了一个工具提示，当您单击节点时，它从JSON文件(开始上下文、单词、结束上下文)中提取文本。我想样式中间元素不同(例如，使其粗体，更大，等)。如果我将。attr或。style添加到变量中，我将得到一个。"Attr不是函数"错误。我还是个新手，感谢你给我的任何建议!

下面是相关的代码片段:

.on("click", function(d) {
      tooltip.transition()  
        .style('opacity', 1)
      var word = d.word
        .style("font-size", 60 + "px");
      tooltip.html(d.beginContext + " " + word + " " + d.endContext)
        .style('left', 1100 + "px")
        .style('top',  250 + 'px');

JSON是这样的:

{"node": "",
  "children": [
  {
    "name":"cat",
    "location":141470,
    "beginContext":"cried; 'canna we be quick?''n'nBut speed was not in Mrs. Marston. She came clinging to Edward's arm, very cautiously, like a",
    "word":"cat",
    "endContext":"on ice.'n'nMartha, her stout red arms bare, her blue gingham dress and white apron flying in the wind, was directed to hold on to Mrs"
  },
  {
    "name":"birds",
    "location":143666,
    "beginContext":"heard and blessed again. To Hazel, they seemed so many other Hazels singing because it was a festal day. To Mrs. Marston they were 'noisy",
    "word":"birds",
    "endContext":", and very disturbing.' Martha crotcheted. She was making edging, hundreds of yards of it, for wedding garments. This was all the more creditable"
  }]}

您也可以在这里查看小提琴:http://jsfiddle.net/westcoast_509/ofcqq8r0/(向右滚动或缩小以查看单击时出现的文本)

下面是一个更新后的例子:http://jsfiddle.net/ofcqq8r0/18/

我已经添加了CSS类: 
.text-large {
     font-size: 80px;
}

我已经修改了JS代码的地方，你做评论div:

定位的地方
var word = '<span class="text-large">' + d.word + '</span>';

我想一切都清楚了，但如果你有什么疑问，请问我。此外，由于你在JS中硬编码'left'和'top'，你也应该将其移动到CSS中。

此外，你可以制作更详细和特定的样式，它只是受限于你的想象力。

我不是很熟悉D3，但我认为你可以这样做:

Javascript: 

.on("click", function(d) {
      tooltip.transition()  
        .style('opacity', 1)
      var word = d.word
        .style("font-size", 60 + "px")
        .style(d.extraStyleName, d.extraStyleValue);
      tooltip.html(d.beginContext + " " + word + " " + d.endContext)
        .style('left', 1100 + "px")
        .style('top',  250 + 'px');

然后在JSON中:

{"node": "",
  "children": [
  {
    "name":"cat",
    "location":141470,
    "beginContext":"cried; 'canna we be quick?''n'nBut speed was not in Mrs. Marston. She came clinging to Edward's arm, very cautiously, like a",
    "word":"cat",
    "extraStyleName":"color",
    "extraStyleValue":"red",
    "endContext":"on ice.'n'nMartha, her stout red arms bare, her blue gingham dress and white apron flying in the wind, was directed to hold on to Mrs"
  },
  {
    "name":"birds",
    "location":143666,
    "beginContext":"heard and blessed again. To Hazel, they seemed so many other Hazels singing because it was a festal day. To Mrs. Marston they were 'noisy",
    "word":"birds",
    "extraStyleName":"color",
    "extraStyleValue":"green",
    "endContext":", and very disturbing.' Martha crotcheted. She was making edging, hundreds of yards of it, for wedding garments. This was all the more creditable"
  }]}

或者你可以分配一个或多个CSS类名，使用D3的classed方法

相关文章：