Q:

how to access data from nested json array D3

I have a JSON array like this:
{

  "nodes":[

           {"id":"x", "style":[
             {"shape":"circle","value":"10","fill":"red"}]
           },
           ....
           ....
           ],
"links":[

         {"source":"x", "target":"y"},
         ....
         ....

       ]
}

I want to fetch data from "style" field.
It doesn't work if u write code like this
var node = svg.append("g")
    .attr("class", "nodes")    
    .selectAll("g")    
    .data(graph.nodes)    
    .enter().append("g")    
    .attr("fill",function(d){return(d.style.fill) })

how can I do?

A:

As your style is an array with just one object, you have to select this array using [0]:
.style("fill", d => d.style[0].fill);

Here is a demo. In this snippet, I'm using this data structure:
var graph = { nodes: [{
    name: "a",
    style: [{ "shape": "circle", "value": "10", "fill": "red"}]
}, {
    name: "b",
    style: [{ "shape": "circle", "value": "10", "fill": "blue"}]
}, {
    etc...

Which is similar to yours. Check it (I'm using D3 v3.x):

var graph = {
    nodes: [{
        name: "a",
        style: [{
            "shape": "circle",
            "value": "10",
            "fill": "red"
        }]
    }, {
        name: "b",
        style: [{
            "shape": "circle",
            "value": "10",
            "fill": "blue"
        }]
    }, {
        name: "c",
        style: [{
            "shape": "circle",
            "value": "10",
            "fill": "teal"
        }]
    }, {
        name: "d",
        style: [{
            "shape": "circle",
            "value": "10",
            "fill": "green"
        }]
    }, {
        name: "e",
        style: [{
            "shape": "circle",
            "value": "10",
            "fill": "silver"
        }]
    }, {
        name: "f",
        style: [{
            "shape": "circle",
            "value": "10",
            "fill": "orange"
        }]
    }],
    links: [{
        source: 1,
        target: 0,
    }, {
        source: 2,
        target: 0,
    }, {
        source: 3,
        target: 0,
    }, {
        source: 4,
        target: 0,
    }, {
        source: 5,
        target: 0,
    }]
};

var width = 400
height = 300;

var force = d3.layout.force()
    .nodes(graph.nodes)
    .links(graph.links)
    .size([width, height])
    .linkDistance(50)
    .charge(-1000)
    .on("tick", tick)
    .start();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link")
    .data(force.links())
    .enter().append("line")
    .attr("stroke", "black")
    .attr("class", "link");

var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", (d, i) => i ? 10 : 16)
    .style("fill", d => d.style[0].fill);

function tick() {
    link.attr("x1", function(d) {
            return d.source.x;
        })
        .attr("y1", function(d) {
            return d.source.y;
        })
        .attr("x2", function(d) {
            return d.target.x;
        })
        .attr("y2", function(d) {
            return d.target.y;
        });

    node.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

