score:0

Accepted answer

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>

score:0

General example as per your data,

var data = {   "nodes":[     {"id":"x",      "style":{"shape":"circle","value":"10","fill":"red"}     } , {"id":"y",      "style":{"shape":"square","value":"20","fill":"blue"}     }  ], "links":[   {"source":"x",    "target":"y"   } ] };

to get the value of 'fill', you need to code like this

data.nodes[0].style.fill

and

 data.nodes[1].style.fill

Related Query

More Query from same tag