d3.js - 数据过滤器适用于 json 数据，但不适用于 csv 数据

Question

在 this vega 图表，如果我下载并转换 flare-dependencies.json使用以下 jq 到 csv命令，

jq -r '(map(keys) | add | unique) as $cols | map(. as $row | $cols | map($row[.])) as $rows | $cols, $rows[] | @csv' flare-dependencies.json > flare-dependencies.csv

并在 edge-bundling.vg.json中更改相应的数据属性文件来自:

{
  "name": "dependencies",
  "url": "data/flare-dependencies.json",
  "transform": [
    {
      "type": "formula",
      "expr": "treePath('tree', datum.source, datum.target)",
      "as": "treepath",
      "initonly": true
    }
  ]
},

到

{
  "name": "dependencies",
  "url": "data/flare-dependencies.csv",
  "format": { "type": "csv" },
  "transform": [
    {
      "type": "formula",
      "expr": "treePath('tree', datum.source, datum.target)",
      "as": "treepath",
      "initonly": true
    }
  ]
},

悬停效果不起作用(当我悬停边缘/节点时颜色不会改变。

我怀疑问题出在这一部分:

  "name": "selected",
  "source": "dependencies",
  "transform": [
    {
      "type": "filter",
      "expr": "datum.source === active || datum.target === active"
    }
  ]

我错过了什么？我怎样才能解决这个问题？

Answer 1

JSON 数据类型化；也就是说，文件格式区分字符串和数字数据。 CSV 数据是无类型的:所有条目都表示为字符串。

上面的图表规范要求一些字段为数字。将输入数据转换为 CSV 时，必须添加 format指定数字数据列的数字类型的说明符。

对于此图表，您可以对节点数据使用以下内容:

"format": {
  "type": "tsv",
  "parse": { "id": "number", "name": "string", "parent": "number" }
},

以下是链接数据:

"format": {
  "type": "tsv",
  "parse": { "source": "number", "target": "number" }
},