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

Question

如何设置 D3 工具提示，以便对来自变量（或只是 JSON 子项）的文本片段进行不同的样式设置？

我创建了一个工具提示，当您单击一个节点时，它会从 JSON 文件（开始上下文、单词、结束上下文）中提取文本。我想以不同的方式设置中间元素的样式（例如，使其粗体、更大等）。如果我将 .attr 或 .style 添加到变量中，我会收到“.attr 不是函数”错误。我还是很新，感谢您的任何提示！

这是相关的sn-p：

.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"
  }]}

您还可以查看小提琴here:http://jsfiddle.net/westcoast_509/ofcqq8r0/（向右滚动或缩小以查看点击时出现的文本）。

Answer 1

这是一个更新的示例： http://jsfiddle.net/ofcqq8r0/18/

我已经添加了 CSS 类：

.text-large {
     font-size: 80px;
}

并且我已经修改了你做评论div定位的地方的JS代码：

var word = '<span class="text-large">' + d.word + '</span>';

我认为一切都很清楚，但如果您有任何疑问，请询问我。 此外，由于您正在对 JS 的 'left' 和 'top'inside 进行硬编码，因此您也应该将其移至 CSS。

此外，您还可以制作更详细和具体的样式，这仅受您的想象力限制。

Answer 2

我对 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"
  }]}

或者，您可以使用 D3 的 classed method 分配一个或多个 CSS 类名称。