从给定数据中包装 div 和锚标记

我有一个带有描述的国家/地区数据及其链接。我需要将每个国家/地区的描述(<p>标签(和链接(<a>标签(包装在一个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>

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

解决方案只是打破该输入选择，该选择会附加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>

相关内容

最新更新

热门标签：