Question

我不确定这是否已经完成（或可以完成），因为我没有看到任何关于它的例子或问题，但我会尽力解释。

我有一个d3力图，我试图给它“扩展”功能。示例：我有一个带

的JSON

{
"nodes": [
{"name":"p1"},
{"name":"p2"},
{"name":"p3"},
{"name":"p4"}
],
"links": [
{"source":"p1","target":"p2"},
{"source":"p1","target":"p3"},
{"source":"p3","target":"p2"},
{"source":"p3","target":"p4"}
]}

因此，如果用户选择节点p3并选择展开。它发送一个请求，我们得到一个JSON回来，可以带来新的节点和链接（但也可以包含重复项）。即，

{
"nodes": [
{"name":"p3"},
{"name":"p4"},
{"name":"p5"},
{"name":"p6"}
],
"links": [
{"source":"p3","target":"p4"},
{"source":"p4","target":"p5"},
{"source":"p4","target":"p6"}
]}

因为我不确定这是否可以在d3中完成。我通过将新的JSON数据附加到旧的JSON数据（dupes和all）来测试功能。现在我假设d3会检查图中已经存在的副本（比如p3到p4）但是在追加之后，当我运行图形时，所有p3 p4 p5和p6只是浮动在没有链接的空间中，即使我指定了链接它创建了p3 p4节点，即使它已经在那里。（仍然构建了4个节点并且链接正确的初始图形）。

在d3中可以执行的功能是什么？我看到过想要在屏幕上显示多个图形的人，但我更喜欢重叠/合并。

我已经尝试创建了我的初始图形然后我使用了一个测试，我按下了一个按钮，我在另一个JSON中读取它，但它中断或者只是没有创建任何东西。

我的代码：

// 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"),
    linkText;

// Mouse Event Variables
var selected_node = null,
    selected_link = null,
    mousedown_node = null,
    mousedown_link = null,
    mouseup_node = null;

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

var jsonStack = { };
var jsonCount = 0;
var jsonPath1 = "../../test/resources/cytoscape.json";
var jsonPath2 = "../../test/resources/cytoscapeexpand.json";

// Read in the JSON data.
d3.json(jsonPath1, function (error, json) {
// expands scope of json
jsonStack[jsonCount] = json;
root = jsonStack[jsonCount];
console.log("Successfully loaded" + json);
//console.log(JSON.stringify(root));
update();
jsonCount += 1;
});

d3.select('#expand').on("click", function() {
d3.json(jsonPath2, function(error, json) {
    // expands scope of json
    root = json

    update();
});
});

function update() {

// sets the source and target to use id instead of index
root.edges.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];

    // push the EDGE attributes in the JSON to the edges array.
    edges.push({
        source: sourceNode,
        target: targetNode,
        label: e.data['label'],
        color: e.data['color']
    });
});

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

link = link
        .data(edges)
        .enter().append("line")
        .attr("class", "link")
        .style("stroke-width", 1.5);

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('dblclick', highlight);

node.append("circle").attr("r", 11);

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

node.append("text")
        .attr("dx", 12)
        .attr("dy", ".35em")
        .style("fill", "black")
        .text(function (d) { return d.data['label']; });

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

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

force.on("tick", function() {
    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 + ")"; });

});
}

// Highlighting of selected node.
function highlight(d) {
if (d.selected == false) {
    d.selected = true;
        return d3.select(this).style("fill", "yellow");
}
else {
    d.selected = false;
        return d3.select(this).style("fill", d.data['color']);
}
update();
}

d3强制图使用多于1个JSON

0 个答案: