Question

这是一个名为Unit2Vec_tSNE.json的JSON文件，我们可以从pos元素中获取数据点。

{
 "No 0": {
  "dur": 135, 
  "name": "00000001_0", 
  "lab": "sil", 
  "pos": [
   17.64800262451172, 
   -1.794445514678955
  ]
 }, 

"No 1": {
  "dur": 28, 
  "name": "00000001_1", 
  "lab": "uo", 
  "pos": [
   -17.94196891784668, 
   -0.8764857649803162
  ]
 }, 

"No 2": {
  "dur": 21, 
  "name": "00000001_2", 
  "lab": "x", 
  "pos": [
   2.7473323345184326, 
   13.970715522766113
  ]
 }
}

JavaScript代码如下，我尝试使用.data(dataset)函数将JSON数据绑定到点。

但是很奇怪，它什么也不显示，console.log('Here!!!!!!!!!')中的.attr("cx", function(d)没有运行。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>D3: A simple scatterplot, setting radii from data</title>
  <script type="text/javascript" src="../d3.js"></script>
  <style type="text/css">
    /* No style rules here yet */
  </style>
</head>
<body>
  <script type="text/javascript">
    //Width and height
    var w = 500;
    var h = 100;

    var dataset; // a global
    d3.json("Unit2Vec_tSNE.json", function(error, json) {
      if (error) return console.warn(error);
      dataset = json;
      visualize();
    });

    function visualize() {
      //Create SVG element
      var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

      console.log(dataset); //work at here
      svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
          console.log('Here!!!!!!!!!'); //not work at here
          return d.pos[0];
        })
        .attr("cy", function(d) {
          return d.pos[1];
        })
        .attr("r", 1);
    }
  </script>
</body>
</html>

看不到这些点，console.log('Here!!!!!!!!!');也无法运行。

为什么？如何解决？谢谢。

我是D3.js的新手。因为我想使用它为我的AI实验做一个交互式项目，所以需要显示此点（在实际应用中，有450000点）。

Answer 1

这是因为数据集是对象而不是数组。引用d3 API：

选择 .data（[data [，key]]）将指定的数组数据与所选元素连接起来

因此，如果您相应地更改JSON的结构，则将看到正确执行了console.log。您必须调整代码以使其兼容，以便显示圆圈。

具有正确格式的数据集变量的演示：

var dataset = [
 {"No 0": {
  "dur": 135, 
  "name": "00000001_0", 
  "lab": "sil", 
  "pos": [
   17.64800262451172, 
   -1.794445514678955
  ]
 }}, 

{"No 1": {
  "dur": 28, 
  "name": "00000001_1", 
  "lab": "uo", 
  "pos": [
   -17.94196891784668, 
   -0.8764857649803162
  ]
 }}, 

{"No 2": {
  "dur": 21, 
  "name": "00000001_2", 
  "lab": "x", 
  "pos": [
   2.7473323345184326, 
   13.970715522766113
  ]
 }}
];

 //Width and height
            var w = 500;
            var h = 100;


              visualize();

    function visualize()
    {
            //Create SVG element
            var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

            console.log(dataset);              //work at here
            svg.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
            .attr("cx", function(d) {
                console.log('Here!!!!!!!!!');  //work at here now too
              //  return d.pos[0]; // edit this according to the new structure
            })
            .attr("cy", function(d) {
              //  return d.pos[1]; // edit this according to the new structure
            })
            .attr("r", 1);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

为什么数据无法与JSON文件绑定？

1 个答案: