通过JSON在D3图中指定值

Question

I am trying to get values from the "links" instead of "nodes. I guess a more helpful way of asking this is how to specify where I am requesting getting the values from my JSON.

JSON for reference:

{
"nodes": [
{"fixed":true,"data": {"id": "foo","idType":"USERNAME","color":"red"},"selected":false},
{"fixed":true,"data": {"id": "bar","idType":"USERNAME","color":"yellow"},"selected": false}
],
"links": [
{"classes":null,"data":{"color":"blue","source":"foo","target":"bar","visible":true},"grabbable":false},
{"classes":null,"data":{"color":"green","source":"bar","target":"foo","visible":true},"grabbable":false}
]}

So an example is I can get this to work

node.style("fill", function(d) { return d.data['color'] });

but not

link.style("stroke", function(d) { return d.data['color'] });

However, this works...

link.style("stroke", "red"});

In the console it says d.data['color'] is undefined. I guess I do not understand how it is being called exactly. I have seen some examples of code that has

function(d, i) { return bla bla }

and I assumed that if d is always node, maybe i might be edges but adding that to my code didn't do much. If someone could explain what the i is touching that would be good also.

Code snippet of actual code below:

// Define the dimensions of the visualization.
var width = innerWidth,
    height = innerHeight,
    color = d3.scale.category20(),
    root;

// Create an array logging what is connected to what
var linkedByIndex = { };

// Create the SVG container for the visualization and define its dimensions
var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");

// Create the force layout
var force = d3.layout.force()
    .size([width, height])
    .charge(-400)
    .linkDistance(50);

//Read in the JSON data.
d3.json("../test/resources/full.json", function(error, json) {
    // expands scope of json
    root = json
    alert(root)
    update();
});

function update() {

// sets the source and target to use id instead of index
var edges = [];
root.links.forEach(function(e) {
    var sourceNode = root.nodes.filter(function(n) {
                return n.data.id === e.data.source;
            })[0],
            targetNode = root.nodes.filter(function(n) {
                return n.data.id === e.data.target;
            })[0];

    edges.push({
        source: sourceNode,
        target: targetNode
    });
});

force
        .nodes(root.nodes)
        .links(edges)
        .start();

link = link
        .data(edges)
        .enter().append("line")
        .attr("class", "link");

node = node
        .data(root.nodes)
        .enter().append("g")
        .attr("class", "node")
    //.attr("fixed", function(d) { return d.fixed=true })
        .call(force.drag)
        .on('mouseover', connectedNodes)
        .on('mouseleave', restore)
        .on('click', highlight);

// Checks for the shape and color to be made for the node.
node.append("circle")
        .attr("r", 10);

node.style("fill", function(d) { return d.data['color'] });
link.style("stroke", function(d) { return d.data['color'] }); 

node.append("text")
        .attr("dx", 12)
        .attr("dy", ".35em")
        .style("fill", "black")
    // Checks what to return as the node label based on idType.
        .text(function (d) {
            if (d.data['idType']==="Comment") {
                return d.data.attrs[1].val;
            }
            else if(d.data['idType']==="MEDIA") {
                return "MEDIA " + d.data['id'];
            }
            else
                return d.data['id'];
        });

root.links.forEach(function (d) {
    linkedByIndex[d.data.source + "," + d.data.target] = 1;
});

resize();
window.addEventListener('resize', resize);

}

Answer 1

Per Lars' comment, edges does not contain the original link data. So it was currently pushing only

edges.push({
    source: sourceNode,
    target: targetNode
});

so to add any information that isn't in my edges I would have to add it. An example is if I were to push the color attribute from JSON my code would look like

edges.push({
    source: sourceNode,
    target: targetNode,
    color: e.data['color']
});