Question

我有一个包含描述的国家/地区数据，它是链接。我需要在div内包装每个国家的描述（<p>标签）和链接（<a>标签）。

当我尝试附加数据锚标记时，它会进入段落标记内。我需要将<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>标记内获得了类似anchor标记的结果。

 <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>

Answer 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>

从给定数据中包装div和anchor标签

1 个答案: