从 JSON 指定 D3 图表中的值

Question

我正在尝试从 "links" 而不是“节点”获取值。我想问这个更有帮助的方法是如何指定我请求从我的 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 始终是节点，也许 i 可能是边，但是将其添加到我的代码中并没有太大作用。如果有人可以解释我正在触摸什么，那也很好。

下面实际代码的代码片段：

// 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

根据 Lars 的评论，edges 不包含原始 link 数据。所以它目前只推送

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

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

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

从 JSON 指定 D3 图表中的值

Specifying Values in D3 Graph from JSON

javascript

json

d3.js

force-layout