D3js：如何在doubleclick on element后打开新标签？ [英] D3js: how to open new tab after doubleclick on element?

问题描述

我有 D3js topojson可视化。 topojson和svg多边形都包含一个属性 name 和 data-name。我目前有：

 函数点击（a）{console.log（a.properties.name）;} 
  

可成功列印名称的值。

我如何用双击打开一个新的标签页：http://en.wikipedia.org / wiki /+ a.properties.name ？

---

< Doubleclick可能是 on（dblclick，function（）{...}），但你可能想到其他方式。我还喜欢从properties.name构建url，而不是将其存储到SVG，这将使它无用地更重。

解决方案

首先在双击上打开 PAGE ：

  function dblclick（a）{
 window.location.assign（http://en.wikipedia.org/wiki/+ a.properties.name，'_blank'）; 
} 
  

您只需添加 .on（dblclick ，dblclick）;

  svg.append（g）
 .attr（class，L0）
 .selectAll（。countries）
 .data（topojson.feature（world，world.objects.admin_0）.features）
 .enter（）。append（path）
 .attr（data-name-en，function（d）{return d.properties.name;}）
 .style fill，＃E0E0E0）
 .attr（d，path）
 .on（dblclick，dblclick）; 
  

并且它将工作（如果您的目标没有其他元素）。

其次，打开新标签 取决于浏览器和用户的偏好。 '_ blank'上层请求新的标签页/窗口，但这取决于浏览器的默认和自定义首选项。

I have a D3js topojson visualisation. Both the topojson and the svg polygons contains an attribute name and data-name"". I currently have :

function click(a){console.log(a.properties.name);}

which successfully print out the name's value.

How could I, with a double click, open a new tab with the url "http://en.wikipedia.org/wiki/"+a.properties.name ?

---

Edit: Doubleclick is likely to be on("dblclick", function(){...}), but you may think to other ways. I also prefer to build the url from the properties.name rather than store it into the SVG, which will make it uselessly heavier.

解决方案

First, opening a PAGE on doubleclick :

 function dblclick(a){
    window.location.assign("http://en.wikipedia.org/wiki/"+a.properties.name, '_blank');
 }

you then simply add .on("dblclick", dblclick); in your D3 element generation :

 svg.append("g")
    .attr("class", "L0" )
  .selectAll(".countries")
    .data(topojson.feature(world, world.objects.admin_0).features) 
  .enter().append("path")
    .attr("data-name-en", function(d) { return d.properties.name; })
    .style("fill", "#E0E0E0")
    .attr("d", path)
    .on("dblclick", dblclick);

and it will work (if no other element is upon your target).

Secondly, opening a NEW TAB is known as depending on the browser and user's preference. The '_blank' upper ask for a new tab/windows, but this depend on the browser default and custom preferences.

这篇关于D3js：如何在doubleclick on element后打开新标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！