Question

首先，我不知道如何使type（）函数遍历.JSON文件中列表的所有元素。我得到了这个结果：

//0:{x: 0.1, y: 0.966}
//1:{x: 0.3, y: 0.757}
//2:{x: 0.6, y: 0.71}
//x: NaN
//y: NaN

我以为我会看到这个：

//0:{x: NaN, y: NaN}
//1:{x: NaN, y: NaN}
//2:{x: NaN, y: NaN}

这是代码：

<!-- .JSON file:
[
  {
    "x": 0.1,
    "y": 0.966
  },
  {
    "x": 0.3,
    "y": 0.757
  },
  {
    "x": 0.6,
    "y": 0.71
  }
]
-->

<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>

<script>

var svg = d3.select("body").append("svg")
.attr("witdh", 250)
.attr("height", 250);

d3.json("data.json", function (myArrayOfObjects){

render(type(myArrayOfObjects))
console.log(myArrayOfObjects)
});

var scale = d3.scaleLinear();

scale.domain([0,1]);
scale.range([0,250]);

function type(d){
d.x = parseFloat(d.x);
d.y = parseFloat(d.y);
return d;
}

function render(data) {
svg.selectAll("rect").data(data)
.enter().append("rect")
.attr("x", scale(function(d) {return d.x;}))
.attr("y", 0)
.attr("height", scale(function(d) {return d.y;}))
.attr("width",10);
}

</script>

</body>
</html>

当我尝试以下类型函数时的事件：

function type(d){
d[0].x = parseFloat(d.x);
d[0].y = parseFloat(d.y);
return d;
}

我明白了：

//0: {x: NaN, y: NaN}
//1: {x: 0.3, y: 0.757}
//2: {x: 0.6, y: 0.71}

是因为parseFloat（）函数不起作用？为什么它会给我NaN并且不会将字符串翻译成浮点数？

Answer 1

首先，这里对type功能存在误解。访问器函数，即行转换函数，是在CSV或TSV（或任何类型的DSV）中为每行调用的函数。 d函数中的type是引用该行的参数。

事情是d3.json不接受行转换功能，只有d3.csv和d3.tsv接受它。好消息是你不需要一个。原因很简单：你已经有了数字（当使用d3.csv或d3.tsv时，即使你的文件有数字，它们也会转换为字符串）。

让我们用你的数据证明这是一个简单的d3.json，看一下控制台：

＆＃13;

d3.json("https://api.myjson.com/bins/6u80r", function(data) {
  data.forEach(function(d) {
    for (var key in d) {
      console.log("The typeof " + d[key] + " in '" + key + ":" + d[key] + "' is " + typeof d[key])
    }
  })
})

＆＃13;

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

＆＃13;

此外，您错误地使用了比例尺。而不是：

.attr("x", scale(function(d) {return d.x;}))

应该是：

.attr("x", function(d) {return scale(d.x);})

查看演示：

＆＃13;

var svg = d3.select("body").append("svg")
  .attr("witdh", 250)
  .attr("height", 250);

var scale = d3.scaleLinear()
  .range([0, 250]);

d3.json("https://api.myjson.com/bins/6u80r", render)

function render(data) {
  svg.selectAll("rect").data(data)
    .enter().append("rect")
    .attr("x", function(d) {
      return scale(d.x);
    })
    .attr("y", 0)
    .attr("height", function(d) {
      return scale(d.y);
    })
    .attr("width", 10);
}

＆＃13;

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

＆＃13;

D3.js parseFloat并遍历.json

1 个答案: