代码之家 › 专栏 › 技术社区 › Nj_96

从给定数据(d3.js)包装一个div和anchor标记

d3.js css html javascript

Nj_96 · 技术社区 · 7 年前

我有一个国家的数据描述和它的链接。我需要把每个国家的描述都包装起来( <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>

0 回复 | 直到 7 年前

Gerardo Furtado 7 年前

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

解决方案就是打破enter选择,它附加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>

推荐文章