从给定数据包装一个 div 和锚标签答案

【问题标题】：Wrapping up a div and anchor tag from given data从给定数据包装一个 div 和锚标签
【发布时间】：2019-06-02 08:04:57
【问题描述】：

我有一个带有描述的国家数据和它的链接。我需要将每个国家/地区的描述（<p>tag）和链接（<a>tag）包装在一个 div 中。

当我尝试附加数据时，锚标记将进入段落标记。我需要将 <p> 标签和锚标签包裹在 div 中。

/*HTML*/ 

 <body>
    <div id="countries">
    </div>
    <script src="https://d3js.org/d3.v5.min.js">
    </script>
</body>

数据如下

  var data = [{
    country: "America",
    href: "/america"
}, {
    country: "France",
    href: "/france"
}];

/*script*/

d3.select("#countries")
    .selectAll('div')
    .data(data)
    .enter()
    .append("div")
    .append("p")
    .text(function(d){return d.country;})
    .append("a")
    .attr('href',function(d){   return d.href;});

我在<p>标签内得到了这样的结果。

 <div id="countries">
    <p>
        America
        <a href="#">
        </a>
    </p>
    <p>
        France
        <a href="#">
        </a>
    </p>
</div>

我期待这样的结果。需要将锚标签和段落包裹在每个 div 中。

 <div id="countries">
    <div>
        <p>
            America
        </p>
        <a href="/america">
        </a>
    </div>
    <div>
        <p>
            France
        </p>
        <a href="/france">
        </a>
    </div>
</div>

【问题讨论】：

嘿 NJ_Coder，你的预期结果和当前结果是一样的；不知道你是不是这个意思。

标签： javascript html css d3.js

【解决方案1】：

观察到的结果是预期的结果，因为所有内容都链接在您的输入选择中。

解决方案只是打破了输入选择，它附加了 div。然后，分别附加 <p> 和 <a> 元素：

var data = [{
  country: "America",
  href: "/america"
}, {
  country: "France",
  href: "/france"
}];

var divs = d3.select("#countries")
  .selectAll('div')
  .data(data)
  .enter()
  .append("div");

divs.append("p")
  .text(function(d) {
    return d.country;
  });

divs.append("a")
  .attr('href', function(d) {
    return d.href;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="countries"></div>

这将创建这个结构：

<div id="countries">
    <div>
        <p>America</p>
        <a href="/america"></a>
    </div>
    <div>
        <p>France</p>
        <a href="/france"></a>
    </div>
</div>

【讨论】：