【问题标题】:d3.js, click to link to another URL encoded with variablesd3.js,点击链接到另一个用变量编码的 URL
【发布时间】:2012-05-13 03:57:54
【问题描述】:

我做了一个散点图,想为每个点添加一个链接。

    chart.selectAll("scatter-dots")
      .data(data)
      .enter().append("circle")
        .attr("cx", function (d) { return x(d.position[0]); } )
        .attr("cy", function (d) { return y(d.position[1]); } )
        .attr("r", 4)
        .style("fill", "#666")
        .style("opacity", 0.5)
    .on("click", function(){
        var url = "http://somelink.com/link.php?id=";
        url += d.link_id;
        //$(location).attr('href', url);
        //window.location = url;    
    });

如果我只放置纯字符串链接,例如 window.location = "http://stackoverflow.com" 但是,如果我从变量向 URL 末尾添加查询,则页面不会重定向。

jquery 和 javascript 都不起作用(如评论)。

我也试过外部js文件,还是失败。

这是一个 PHP 文件,如果有帮助的话。

【问题讨论】:

  • 简单解决。改为 on("click", function(d)....

标签: javascript jquery d3.js


【解决方案1】:

如果它适用于静态字符串,则 d.link_id 有问题。尝试通过alert(d.link_id) 或如果您使用萤火虫或类似工具,请通过console.log(d.link_id) 来查看里面的内容。

或者,您应该使用真正的锚点来链接您的节点,而不是设置点击事件。这会像......

chart.selectAll("scatter-dots")
  .data(data)
  .enter()
  .append("a")
    .attr("xlink:href", function(d) {return "http://somelink.com/link.php?id=" + d.link_id})
    .append("circle")
      .attr("cx", function (d) { return x(d.position[0]); } )
      .attr("cy", function (d) { return y(d.position[1]); } )
      .attr("r", 4)
      .style("fill", "#666")
      .style("opacity", 0.5)

(我似乎不记得这是否是这样做的确切方法,您可能需要将锚点保存在变量中,然后将圆圈附加到它们。)

【讨论】:

  • 谢谢,但我只是将 function() 更改为 function(d) 并且它起作用了!!
  • 我在 circle ojbect 上使用 xlink:href 但它不起作用!看来我们必须使用 on("click") 解决方案。顺便说一句,我是 D3 的新手,如何添加一个属性,比如链接 url,然后在 on("click"... 事件中取回它?
  • @ScottChu 你会做的....on("click", function(){ d3.select(this).attr("your-attribute");}
  • xlink:href 现在似乎已被弃用。
猜你喜欢
  • 2014-06-16
  • 2015-06-16
  • 2014-04-06
  • 1970-01-01
  • 2015-06-03
  • 2018-12-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多