Question

I am currently trying to customize an example such as this … http://bl.ocks.org/1377729 to take json data using the D3.json function.

At the moment I have been trying to do this:

     d3.json("http:", function(json) { 

     var nodes = [];
     var labelAnchors = [];

here i have tried to import the function, but it doesnt do anything

     for(var i = 0; i < 30; i++) {


            var node = json;
            nodes.push(node);
            labelAnchors.push({
                node : node
            });
            labelAnchors.push({
                node : node
            });
        };

I have also tried to put the function into the .text function

     anchorNode.append("svg:text")
            .text(function(d, i) {return i % 2 == 0 ? "" : d.node.json  })
            .style("fill", "#555")
            .style("font-family", "Arial")
            .style("font-size", 12);

Could anyone tell me where I’m going wrong please!

Answer 1

First build the nodes array and labelAnchors array by stepping through your json array.

   for (var i = 0; i < json.length; i++) {
     var node = json[i];
     nodes.push(node);
     labelAnchors.push({
       node : node
     });
     labelAnchors.push({
       node : node
     });
   };

The example relies on having objects with a key called label, while in your case that key is called Name. So you would need to adjust the example code to something like:

anchorNode.append("svg:text")
    .text(function(d, i) {
      return i % 2 == 0 ? "" : d.node.Name;
    })
    .style("fill", "#555")
    .style("font-family", "Arial")
    .style("font-size", 12);