Dorisxd 2019-04-07 20:09 采纳率: 100%
浏览 432
已采纳

d3 data( , function(d){return d.id;}) 用不了？

 <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

var data = [
  {name: "Locke", number: 4},
  {name: "Reyes", number: 8},
  {name: "Ford", number: 15},
  {name: "Jarrah", number: 16},
  {name: "Shephard", number: 31},
  {name: "Kwon", number: 34}
];

d3.selectAll("div")
  .data(data, function(d) { console.log(d);return d ? d.name : this.id; })
    .text(function(d) { return d.number; });

</script> 
</body>

如上面的代码，得到的网页是空白的那个键值的function一直用不了

  • 写回答

1条回答 默认 最新

  • Dorisxd 2019-04-07 20:31
    关注

    div改为：

    <div id="Ford"></div>
<div id="Jarrah"></div>
<div id="Kwon"></div>
<div id="Locke"></div>
<div id="Reyes"></div>
<div id="Shephard"></div>

    若是空的标签，要先data绑定数据再使用键值函数

    <script src="https://d3js.org/d3.v5.js"></script>

<body>
    <p></p>
    <p></p>
    <p></p>


<script>
    //未绑定键值
    var persons = [{id: 3, name:"1xx"},
                    {id: 6, name:"2xx"},
                    {id: 9, name:"3xx"}];
    var p = d3.select("body").selectAll("p");

    //先对数据进行绑定
    p.data(persons).text(function(d){return d.id + " : " + d.name;});

    var persons = [{id: 6, name:"1xx"},
                    {id: 3, name:"2xx"},
                    {id: 9, name:"3xx"}];
    var p = d3.select("body").selectAll("p");
    //再根据键值排序
    p.data(persons, function(d){return d.id;}).text(function(d){return d.id + " : " + d.name;});

</script> 
</body>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 关于vue2中methods使用call修改this指向的问题
  • ¥15 idea自动补全键位冲突
  • ¥15 请教一下写代码，代码好难
  • ¥15 iis10中如何阻止别人网站重定向到我的网站
  • ¥15 滑块验证码移动速度不一致问题
  • ¥15 定制ai直播实时换脸软件
  • ¥100 栈回溯相关，模块加载后KiExceptionDispatch无法正常回溯了
  • ¥15 Utunbu中vscode下cern root工作台中写的程序root的头文件无法包含
  • ¥15 麒麟V10桌面版SP1如何配置bonding
  • ¥15 Marscode IDE 如何预览新建的 HTML 文件