从Javascript关联数组中提取HTML链接以应用于D3生成的表

Extracting HTML Link from Javascript Associative Array to apply to D3 Generated Table

本文关键字：D3 应用于 链接 关联 Javascript 数组 HTML 提取      更新时间：2023-09-26

问题：我从关联数组中提取的HTML链接不是作为链接应用的，而是作为字符串应用的，因此浏览器无法遍历HTML链接。

完整的可视化示例和代码：位于：http://bl.ocks.org/Guerino1/6366020

数据：我有一个关联数组的Javascript数组。

  var densitySet = [
    { Name: "<a href='"http:if4it.com'">IF4IT</a>", Total: 1000 },
    { Name: "Node2", Total: 1500 },
    .
    .
    .
    { Name: "Node3", Total: 700 },
    { Name: "Node27", Total: 1500 }
  ];

您会注意到，第一个关联数组的第一个元素有一个数据元素，它是一个HTML链接。我想提取该链接，并将其应用于我使用D3生成的HTML表的单元格。

症状：当表呈现时，完整的HTML路径呈现为字符串，而不是可遍历的HTML链接。

提取链接数据并将其应用于单元格的代码如下。。。

     var densityBodyDataRecords = d3.selectAll("#density_body_record").selectAll("tr.td")
      .data(function(d) { return densityKeys.map(function(k) { return d[k]; }); })
      .enter()
        .append("td")
          .attr("id", "density_body_data")
          //.text(function(d) { return d; })
          .text(function(d, i) {
            if(i < 2) { return d; } <------------------TEXT APPLIED HERE
          })
          .style("font-size", "10pt")
          .append("svg")
            .attr("width", function(d, i) {
              if(i == 0) { return 200; }
              else if(i == 1) { return 100; }
              else { return 500; }
            })
            //.attr("height", 15)
            .attr("height", function(d, i) {
              if(i < 2) { return 0; }
              else { return 15; }
            })
            .append("rect")
              .attr("height", 15)
              .style("fill", "Blue")
              .attr("width", function(d, i) {
                if(i == 2) { return (d/maxRelationshipValue)*100*5; }
        else { return 0; }
              });

任何关于如何解决这个问题的想法都将不胜感激。

谢谢！

如果希望将内容解析为HTML，则必须调用.html()，而不是.text()。

相关文章：