Question

在D3中，当制作超链接节点（圆形包布局）时，有一种方法可以使用基本URL模式，然后使用{d.url}来指定每个给定的网页。我在我的网站上使用Drupal，我希望节点链接回来。 Drupal使用www.drupal.org/blogpost/[post_id]的URL结构。我可以从数据库中获取post_id的确定，我只是不确定如何将它连接到“xlink：href”部分？我认为它可能就像......

node.append("a") .attr("xlink:href", function(d) {return "http://www.example.com/blogentry/..." + d.url}) .append("circle") .attr("r", function(d) { return d.r; });

合并基本网址和各个博客条目ID让我难以理解。任何帮助或线索都将非常感激。

Answer 1

用于构造URL的方法没有问题。也许您尝试访问的值未在数据数组中的对象上定义？例如，确保定义了d.url。

这是一个小工作示例，显示使用您使用的相同方法工作的链接（也是hosted on bl.ocks.org）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Links Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  <body>
    <script>
      var data = ["JavaScript", "Document_Object_Model", "Ajax_(programming)"];

      d3.select("body").append("svg")
          .attr("width", 960)
          .attr("height", 500)
        .selectAll("a").data(data)
          .enter()
            .append("a")
              .attr("xlink:href", function (d){
                return "http://en.wikipedia.org/wiki/" + d;
              })
            .append("rect")
              .attr("x", function (d, i){
                return 140 + i * 240;
              })
              .attr("y", 150)
              .attr("width", 200)
              .attr("height", 200);
    </script>
  </body>
</html>

2015年6月10日更新：更新小提琴：

当您的代码计算＆＃34; submissionsByCountry = d3.nest（）...＆＃34;时，您将丢失entityid属性，因为它正在聚合。

如果你检查了你所拥有的价值＆＃34; d＆＃34;在添加链接的地方，您可以看到它们看起来像这样

Object {key: "OrgUU", values: 1, parent: Object, depth: 2, value: 1…}

因为这些对象是圆形包装布局的结果，而不是原始数据数组中的元素。

如果Organization和id之间存在1-1映射（在示例数据中看起来是真的），则可以从组织中查找id。首先，您可以像这样构建查找表：

var idByOrg = {};
data.forEach(function (d) {
    idByOrg[d.Organisation] = d.entityid;
});

然后稍后访问它：

//Create nodes/circles
node.append("svg:a")
    .attr("xlink:href", function (d) {
        console.log(d); // Shows {key: "OrgUU", values: 1, parent: Object, depth: 2, value: 1…}
        var entityid = idByOrg[d.key];
        return "http://www.example.com/entityform/" + entityid;
    })
    .append("circle")
    .attr("r", function (d) {
        return d.r;
    });

现在，如果您检查生成的网址，就会看到＆＃34; http://www.example.com/entityform/10＆＃34;和＆＃34; http://www.example.com/entityform/3＆＃34;。

这里有working fiddle这样做。

请注意，链接仅适用于圆树中的叶节点。我想下一步将只包括叶节点上的链接，而不是外圈。

D3超链接节点：网址格式+ {d.url}

1 个答案: