I'm goint to make a bubble chart using d3.v3.js following this tutorial:

The chart is drawn fine when the json data is loaded from mydata.json file but I get error when loading the very same json from a url:

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 ;})


}) 

The json data in /assets/mydata.json:

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

The error that I get:

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

How can I fix it?

I'm goint to make a bubble chart using d3.v3.js following this tutorial:

The chart is drawn fine when the json data is loaded from mydata.json file but I get error when loading the very same json from a url:

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 ;})


}) 

The json data in /assets/mydata.json:

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

The error that I get:

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

How can I fix it?

• javascript
• d3.js
• charts

• Possible duplicate of Error: Invalid value for <g> attribute transform="translate(undefined,undefined)" – Ivan Commented Jul 7, 2018 at 9:41
• I have no clue. I guess they are d3 internal conventions to deal with json. I just followed the tutorial linked above. – Babr Commented Jul 7, 2018 at 9:41
• let me check the link – Ivan Commented Jul 7, 2018 at 9:42
• @Ivan I saw that question but did not help me. – Babr Commented Jul 7, 2018 at 9:43
• Can you show what es out when logging nodes just after the line var nodes = pack.nodes(data);? – Ivan Commented Jul 7, 2018 at 9:56

1 Answer 1

You are getting this error because d.x and d.y are undefined. That means you are not importing the D3 template correctly.

Just before you import the JSON file you need to import the layout from the D3 library:

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

Notice that the size method takes in an array as the first parameter: [width, height]:

force.size([width, height])

If size is specified, sets the available layout size to the specified two-element array of numbers representing x and y. If size is not specified, returns the current size, which defaults to [1, 1].

- D3 Documentation

Concerning your problem with the JSON file:

Use the line below just before declaring nodes:

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

to parse the JSON string to a JavaScript object if need be.