javascript - 如何将数据添加到其数据位于父对象的父对象中的 selectAll 占位符？

Question

最初我有一个来自 csv 的平面哈希结构，它具有以下字段:

zoneId,op,metricName,value

然后我把它嵌套在

d3.nest()
  .key(function(d){return d.zoneId})
  .key(function(d){return d.op})
  .entries(data)

现在它的层次结构看起来像

zoneId -> op -> <details>

数据示例

nestedData = {
[{
  "key": "zone1",
  "values": [{
    "key": "Get",
    "values": [{
      "zoneId":"zone1"
      "op":"Get"
      "metricName":"CompletionTime",
      "value":"10ms"
    }, {
      "zoneId":"zone1"
      "op":"Get"
      "metricName":"Throughput",
      "value":"100 query/s"
    }]
  },{
    /* Similar to the "values" of last bracket */
    }]
  }]
}, {
  "key": "zone2",
  "values": [
    /* Similar to the "values" of last bracket */
    ]
  }]
}]
}

现在我想从这个嵌套数据结构构建一个表。

• 每个区占一张表
• 每个操作都是一行
• 在每一行
  • 左栏是操作名称
  • 右列是指标的格式化版本(例如:“10 ms @ 100 QPS”)

问题是:

我应该如何将数据绑定(bind)到 占位符？因为当我将它们附加到

时

var tables = d3.select('#perfs .metrics')
          .selectAll('table')
          .data(nestedData)
          .enter().append('table');
/* added tbody and data */
tables.append('tbody')
      .selectAll('tr')
      .data(???).enter()
      .append('tr')
      .selectAll('td')
      .data(function(d){return [d.key,d.value];})   // left and right column
      .enter().append('td')
      .text(function(d){ /* iterate through the metrics and format them */ })

这里有两个我能想到的解决方案:

• 将数据分配给 tbody(但听起来很老套!)
• 访问 this.parentNode.__data__(听起来也很老套!)

你能给点建议吗？

最佳答案

如果你看<a href="https://github.com/mbostock/d3/wiki/Selections#wiki-append" rel="noreferrer noopener nofollow">selection.append()</a>在API ，内容如下:

Each new element inherits the data of the current elements

换句话说，<tbody>默认情况下将具有绑定(bind)到 <table> 的相同数据.因此，您的代码将是:

var metrics = d3.select('#perfs .metrics');
var tables = metrics.selectAll('table').data(nestedData);
tables.enter().append('table');

var tbody = tables.append('tbody');
var rows = tbody.selectAll("tr").data(function(d) { return d.values; });
rows.enter().append("tr");
var cells = rows.selectAll("td").data(function(d) { return d.values; });
cells.enter().append("td")
  .text(function(d){ /* iterate through the metrics and format them */ });

关于javascript - 如何将数据添加到其数据位于父对象的父对象中的 selectAll 占位符？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12699265/

上一篇：c# - Facebook 登录永远重新加载页面

下一篇：javascript - 这个事件处理程序在做什么？

相关文章：

javascript - 以 Php 形式将数据输入数据库，并将该数据转换为 JSON 格式以在 D3 中使用

javascript - 如何从ajax post请求中获取参数

javascript - 分别为每个元素运行 jQuery 函数

JavaScript boolean 运算不工作且循环出错

javascript:使用 lodash/fp 流返回对象

javascript - d3.js 树布局 : collapsing other nodes when expanding one?

javascript - d3 v4 刷区错误 : <rect> attribute x: Expected length, "NaN"

javascript - React.JS 无法读取 null 错误的属性 'props'

javascript - 如何在d3js中显示堆积条形图的总值

jquery - 销售管道图

©2023 IT工具网  联系我们

有数据但 没有，而 在 下。

Answer 1

如果你看<a href="https://github.com/mbostock/d3/wiki/Selections#wiki-append" rel="noreferrer noopener nofollow">selection.append()</a>在API ，内容如下:

Each new element inherits the data of the current elements

换句话说，<tbody>默认情况下将具有绑定(bind)到 <table> 的相同数据.因此，您的代码将是:

var metrics = d3.select('#perfs .metrics');
var tables = metrics.selectAll('table').data(nestedData);
tables.enter().append('table');

var tbody = tables.append('tbody');
var rows = tbody.selectAll("tr").data(function(d) { return d.values; });
rows.enter().append("tr");
var cells = rows.selectAll("td").data(function(d) { return d.values; });
cells.enter().append("td")
  .text(function(d){ /* iterate through the metrics and format them */ });