代码之家 › 专栏 › 技术社区 › Rafa

将数据传递到d3js

d3.js json javascript

Rafa · 技术社区 · 10 年前

我有一个json对象,格式如下

{
   "tweet":[

     {"text": "hello world"},
     {"text": "hello world"}

   ]
}

在下面的代码中,当我打印“数据”时,控制台告诉我 Object tweet: Array[131] ,但当我打印出我的“点”值(我将数据绑定到它)时,我的值是 0: Array[1] .我做错了什么?

d3.json("tweets.json", function(error, data){

  if (error) return console.warn(error);

  //tells me I have an `Object tweet: Array[131]`
  console.log(data);
  var dots = svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle");

  //says I have `0: Array[1]`
  console.log(dots);
}

1 回复 | 直到 10 年前

Justin Wilson 10 年前

正如注释所提到的,修复您的JSON,如下所示。我喜欢使用JSON验证器(如 https://jsonformatter.curiousconcept.com/ )确认我有有效的JSON数据。此外,需要对Javascript进行一些更改。请参见下面更新的Javascript代码。

JSON文件

{
   "tweet":[
      {"text":"hello world"},
      {"text":"hello world"}
   ]
}

Javascript文件

d3.json("tweetsTest.json", function (error, data) {

    if (error) return console.warn(error);

    //tells me I have an `Object tweet: Array[131]`
    console.log(data);
    var dots = d3.select("svg")//modified so d3.select("svg") not just svg
        .selectAll("circle")
        .data(data.tweet)//modified, need data.tweet to access because you have root "tweet"
        .enter()
        .append("circle")
        .attr("r", 5)//added r, cx, and cy
        .attr("cx", function (d, i) {
            return (i+1) * 20;
        })//added
        .attr("cy", function (d, i) {
            return 20;
        });//added

    //says I have `0: Array[1]`
    console.log(dots);
});

HTML文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
    <script type="text/javascript" src="d3.js"></script>
    <script type="text/javascript" src="d3_stackoverflow34456619.js"></script>
</head>

<body>
    <svg style="width:500px;height:500px;border:1px lightgray solid;"></svg>
</body>
</html>

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

3 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

3 年前

user6456564 · 双条形图创建

8 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

8 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

8 年前

MTT · 最适合散点图的回归

8 年前

Cyley Simon · 以chile/name格式将Csv转换为json

8 年前

Himani · 线图和面积图之间的颜色不同

8 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

8 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

8 年前