首先，我不知道如何使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并且不会将字符串翻译成浮点数？
首先，这里有关于type功能的误解。访问器函数，即行转换函数，是为CSV或TSV（或任何类型的DSV）中的每一行调用的函数。 d函数中的type是指行的参数。
事情是d3.json不接受行转换功能，只有d3.csv和d3.tsv接受它。好消息是你不需要一个。原因很简单：你已经有了数字（另一方面，当使用d3.csv或d3.tsv时，即使你的文件有数字，它们也会被转换成字符串）。
让我们来证明，这是一个简单的d3.json使用你的数据，看看控制台：
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])
}
})
})<script src="https://d3js.org/d3.v4.min.js"></script>此外，您正在错误地使用您的秤。代替：
.attr("x", scale(function(d) {return d.x;}))
它应该是：
.attr("x", function(d) {return scale(d.x);})
查看演示：
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);
}<script src="https://d3js.org/d3.v4.min.js"></script>