如何将CSV文件中的链接添加到使用D3生成的SVG元素？

Question

我有点绑定,需要一些帮助我将svg元素与CSV文件中包含的URL链接起来.我有一个超过100个符号的符号图.符号基于CSV文件中从经度和纬度中提取的坐标,该文件还包含我希望每个唯一符号链接到的链接.我知道有一种简单的方法可以做到这一点,我确信我忽略了解决方案.

我的CSV文件如下:

        name,longitude,latitude,city,state,url

查尔斯顿学院,803,342,查尔斯顿,SC,http: //sitename.com/colleges/college-of-charleston/

等等...

我的符号是使用D3生成的,并放置在我的SVG地图之上.我也使用D3将符号包装在锚标签中.我只是希望这些锚标签链接到与该特定符号的纬度和经度相关的适当URL.

  /* Start SVG */
    var width = 960,
        height = 640.4,
        positions = [],
        centered;

    var bodyNode = d3.select('#Map').node();
    var list = $('.school-list').each(function(i){});
    var svg = d3.select("#Map");
    var contain = d3.select("#map-contain");
    var circles = svg.append("svg:g")
                     .attr("id", "circles");
    var g = d3.selectAll("g");

        // var locationBySchools = {};

        d3.csv("http://sitename.com/wp-content/themes/vibe/homepage/schools.csv",function(schools){
            schools = schools.filter(function(schools){
            var location = [+schools.longitude, +schools.latitude];
            // locationBySchools[schools.loc] = location;
            positions.push(location);
            return true;
        });



            circles.selectAll("circles")
            .data(schools)
            .enter().append("svg:a")
            .attr("xlink:href", function(d) { })
            .append("svg:circle")
            .attr("cx", function(d,i) {return positions[i][0]})
            .attr("cy", function(d,i) {return positions[i][1]})
            .attr("r", function(d,i) {return 6})
            .attr("i", function(d,i) {return i})
            .attr("class", "symbol")

真的坚持这个...任何想法？

Answer 1

简短的回答是,您只需在url分配xlink:href属性时从数据中返回属性:

.attr("xlink:href", function(d) { return d.url; }) 

但是,您发布的代码还有其他一些问题.

问题1. circles.selectAll('circles')

首先选择g元素,然后在其中选择具有tag-name的所有元素circles.问题是它circles不是一个有效的svg标签.这只是创建一个空选择,在这种情况下可以,因为选择仅用于创建新元素.但是,做这样的虚拟选择是一个坏习惯,对于试图理解你的代码的其他人来说,这可能会让人感到困惑.相反,您应该决定要给每个新链接元素的类名,并使用该类名进行选择.例如,如果您决定给他们一个类,link您可能希望执行以下操作:

首先为所有元素创建一个选择class="link":

circles.selectAll('.link')

此选择最初将为空,但是当您使用.data()将数据绑定到它时,将为其提供一个输入选择,您可以使用该选择来创建新元素.然后,您可以将类添加link到新创建的元素:

.data(schools).enter().append('svg:a')
  .attr('class', 'link')

问题2. .attr("i", function(d,i) {return i})

这个很简单,isvg元素没有这样的属性.如果要在元素上存储任意数据以便以后可以访问它,可以使用数据属性.在这种情况下,您可能希望使用一些好的和语义的东西data-index.

问题3. positions.push(location)

这是一个很大的问题.我不建议您创建一个单独的数组来存储数据集中更改的值.您可以在函数调用中使用访问器函数d3.csv(),并以这种方式清理传入的数据.它将使您不必在两个独立的阵列中维护一致的数据.访问器函数将迭代数据集,将当前数据作为输入,并应返回表示将使用的调整数据的对象.这是使用你的一元操作员强制你的经纬度的好地方:

function accessor(d) {
  return {
    name: d.name,
    longitude: +d.longitude,
    latitude: +d.latitude,
    city: d.city,
    state: d.state,
    url: d.url
  };
}

将访问者功能挂钩到您的d3.csv()呼叫有两种不同的方法:

方法1:添加一个中间参数,d3.csv()以便参数是(<url>, <accessor>, <callback>):

d3.csv('path/to/schools.csv', accessor, function(schools) {
  // ...etc...
});

方法2:使用.row()方法d3.csv()

d3.csv('path/to/schools.csv')
  .row(accessor)
  .get(function(schools) {
     // ...etc...
  });

现在,当您想要以首选格式访问纬度和经度时,可以从绑定数据中获取它们,而不是从外部源获取.这可以保持一切清洁和一致.

将所有这些放在一起,您将得到以下结果:

d3.csv('http://sitename.com/wp-content/themes/vibe/homepage/schools.csv')
  // provide the accessor function
  .row(function accessor(d) {
    return {
      name: d.name,
      longitude: +d.longitude,
      latitude: +d.latitude,
      city: d.city,
      state: d.state,
      url: d.url
    };
   })
  // provide a callback function
  .get(function callback(schools) {
    circles.selectAll('.link')
      .data(schools)
      .enter().append('svg:a')
        .attr('class', 'link')
        // point the link to the url from the data
        .attr('xlink:href', function(d) { return d.url; })
          .append('svg:circle')
            .attr('class', 'symbol')
            // now we can just use longitude and latitude
            //  since we cleaned them up in the accessor fn
            .attr('cx', function(d) { return d.longitude; })
            .attr('cy', function(d) { return d.latitude; })
            // constants can be assigned directly
            .attr('r', 6)
            .attr('data-index', function(d,i) { return i; });
  });