создания простой список гиперссылок в d3.js или JS

Question

У меня есть строка, содержащая запятую URL, например:

«www.url1.com, www.url2.com, www.url3.com ».

Я могу передать эту строку функции JS. Я также могу разбить эту строку на список URL-адресов. Помимо этого, как я могу пройти через этот список и создать простую страницу гиперссылок, как показано ниже? Я предпочитаю решение на основе d3.js.

<a href="www.url1.com">First URL!</a> 
<a href="www.url1.com">Second URL!</a> 
<a href="www.url1.com">Third URL!</a> 

Answer 1

Не знаю, почему вы хотели бы сделать это с помощью библиотеки вместо простых JS, проще всего будет как

var str = "www.url1.com, www.url2.com, www.url3.com"; 
 
    str.split(',').forEach(function(url, i) { 
 
     var el = document.createElement('a'); 
 
     el.href = "http://" + url.trim(); 
 
     el.innerHTML = "URL " + ++i 
 
     document.body.appendChild(el); // or target div 
 
    });

Answer 2

Раствор с помощью d3.

var str = "www.url1.com, www.url2.com, www.url3.com"; 
 

 
var urls = str.split(","); 
 

 
var anchors = d3.select("body") 
 
    .selectAll("a") 
 
    .data(urls) 
 
    .enter() 
 
    .append("a") 
 
    .attr("href", function(url) { 
 
    return url.trim(); 
 
    }) 
 
    .text(function(url, i) { 
 
    return "URL " + (i + 1); 
 
    }); 
 

 
anchors.insert("br",":first-child");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>