错误： <g> 属性转换：期望的数字，“ translate（undefined，undefi…”

Question

我打算按照本教程使用d3.v3.js制作气泡图：

从mydata.json文件加载json数据时，图表绘制得很好，但是从url加载完全相同的json时出现错误：

var JSON_URL = "http://127.0.0.1:8080";
 //This works fine:
//var JSON_URL = "/assets/mydata.json";  

var width = 800, 
    height = 600;

var canvas = d3.select("#bubble").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
        .attr("transform", "translate(50,50)");

var pack = d3.layout.pack()
    .size(width, height-50)
    .padding(10)

d3.json(JSON_URL, function(data) {

    console.log('server data is:', data);
    //server data is: {"name":"animal","children":[{"name":"cat","value":4},{"name":"dog","value":5},{"name":"fish","value":10}]}

    var nodes = pack.nodes(data);
    var node = canvas.selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
            .attr("class", "node")
            .attr("transform", function (d) { return "translate(" + d.x + ","+ d.y + ")" ;});

    node.append("circle")
        .attr("r", function(d) {return d.r; })
        .attr("fill", "steelblue")
        .attr("opacity", 0.25)
        .attr("stroke", "steelblue" )
        .attr("stroke-width", "2");

    node.append("text")
        .text(function(d) {return d.children ? "" : d.name ;})


}) 

/assets/mydata.json的json数据：

{    
    "name" : "animals",
    "children" : [
        {"name":"dog", "value": 5},
        {"name":"cat", "value": 4},
        {"name":"fish", "value": 10}
    ]
}

我得到的错误：

Error: <g> attribute transform: Expected number, "translate(undefined,undefi…".

我该如何解决？

Answer 1

因为dx和dy undefined所以您收到此错误。 这意味着您没有正确导入D3模板。

在导入JSON文件之前，您需要从D3库导入布局：

var pack = d3.layout.pack()
    .size([width, height - 50]) // <- size

注意， size方法将数组作为第一个参数： [width, height] ：

force.size([width, height])

如果指定了size ，则将可用的布局大小设置为表示x和y的指定的双元素数字数组。 如果未指定size ，则返回当前大小，默认为[1, 1] 。

-D3文档

---

关于JSON文件的问题：

在声明nodes之前使用下面的行：

data = (typeof data == "string") ? JSON.parse(data) : data;

必要时将JSON字符串解析为JavaScript对象。