Question

我使用D3创建了一个文档，其中图表会根据用户选择的内容而改变，但是它有效。但是数据存在问题。

zivotni_broj;Datum;Kolicina_Vece;Kolicina_Jutro;fat;pro;lac;cels;sol;vlasnik
AA 110137783;3.6.2003 0:00:00;0,00;2100,00;5,21;3,70;4,44;,00;;00000001
AA 110137793;3.6.2003 0:00:00;0,00;1600,00;3,80;2,84;4,51;,00;;00000001
...

正如您所看到的，它是DSV格式，但数据名为＆＃34; sol＆＃34;从未记录过。我向消息来源询问了数据，他们说这意味着它是零，但D3并没有将其识别为零，并且无法绘制图形。

数据成功加载，我得到一个对象数组，我知道如何更改不存在的＆＃34; sol＆＃34;到＆＃34; 0,00＆＃34;使用Javascript循环的价值，但由于我在D3上做演示，我想尽可能多地使用D3提供的功能。我不愿意更改数据，因为我想证明D3可以处理几乎任何数据，而无需更改数据文件以便它可以正常工作。

所以我的问题是，D3是否有办法循环访问数据并更改它而无需更改原始数据文件？

Answer 1

当D3解析像你这样的DSV时，某些标题没有相应的值，它只会创建一个值为空字符串的属性。

看看这里（bar是空的）：

＆＃13;

var format = d3.dsvFormat(";")
var dsv = format.parse(d3.select("#dsv").text());

console.log(dsv)

＆＃13;

pre {
  display: none;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="dsv">foo;bar;baz
12;;4
21;;5
17;;9</pre>

＆＃13;

因此，要创建零，只需循环数组：

＆＃13;

var format = d3.dsvFormat(";")
var dsv = format.parse(d3.select("#dsv").text());
dsv.forEach(function(d) {
  for (var key in d) {
    if (!d[key]) {
      d[key] = 0
    }
  }
})

console.log(dsv)

＆＃13;

pre {
  display: none;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="dsv">foo;bar;baz
12;;4
21;;5
17;;9</pre>

＆＃13;

编辑：对于更加惯用的，面向D3的答案，如suggested in the comments，这是一个使用行函数的演示：

＆＃13;

var format = d3.dsvFormat(";")
var dsv = format.parse(d3.select("#dsv").text(), function(d, i, columns) {
  for (var i = 0; i < columns.length; i++) {
    if (!d[columns[i]]) {
      d[columns[i]] = 0
    }
  }
  return d;
})

console.log(dsv)

＆＃13;

pre {
  display: none;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="dsv">foo;bar;baz
12;;4
21;;5
17;;9</pre>

＆＃13;

Answer 2

作为Gerardo的answer的变体，您可以使用行转换函数，它作为dsv.parse(string, [row])的可选第二个参数提供。由于您要求展示D3，这可能是您可以获得全D3解决方案的最接近的。

var dsv = 
`zivotni_broj;Datum;Kolicina_Vece;Kolicina_Jutro;fat;pro;lac;cels;sol;vlasnik
AA 110137783;3.6.2003 0:00:00;0,00;2100,00;5,21;3,70;4,44;,00;;00000001
AA 110137793;3.6.2003 0:00:00;0,00;1600,00;3,80;2,84;4,51;,00;;00000001`;
    
var parse = d3.dsvFormat(";").parse;
var data = parse(dsv, d => {   // Here the row conversion function is specified
  d.sol = "0,00";              // as an anonymous fat arrow function filling in
  return d;                    // the empty column sol.
});
console.log(data);

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

请注意，这完全符合您的要求，即用d.sol填写"0,00"，不多也不少。但是，您不限于此，您可以执行更多操作，例如将字符串转换为数字，过滤或压缩属性，引入新属性等等。你甚至可以返回一个完全不同的对象或从头开始构建的数组。

Answer 3

我假设您或多或少地提到了标签？如果是这样，请使用数据对象内的空选项。看看这是否适合你。

empty: { label: { text: "0,00" }   }

使用D3

3 个答案: