Question

我试图从“链接”而不是“节点”获取值。我想这是一个更有用的方式来询问这是如何指定我从我的JSON请求获取值的位置。

JSON供参考：

{
"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}
]}

所以一个例子是我可以让它工作

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

但不是

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

然而，这有效......

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

在控制台中，它说d.data ['color']未定义。我想我不明白它是如何被完全调用的。我见过一些代码示例

function(d, i) { return bla bla }

我假设如果d总是节点，也许我可能是边缘但是将它添加到我的代码中并没有做太多。如果有人能够解释我所触及的内容也会很好。

以下实际代码的代码段：

// 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'注释，edge不包含原始链接数据。所以它目前只推动

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

所以要添加任何不在我边缘的信息，我必须添加它。一个例子是如果我从JSON推送颜色属性，我的代码看起来像

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

从JSON中指定D3 Graph中的值

1 个答案: