Question

我是d3.js的新手，基本上我想要这样的效果：

https://bl.ocks.org/mbostock/1062288

当您单击某个节点时，子节点将被隐藏，如果已经被隐藏，则将显示它们。

我不知道该怎么做。

我的结构是这样的：

var label = {
'nodes': [],
'links': []
};

我发现以它们为基础的示例具有不同的结构。

有人可以帮我吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<html>
<body>
<svg id='viz'></svg>
</body>

<script src='https://d3js.org/d3.v5.min.js'></script>
<script>
var width = 800;
var height = 600;
var color = d3.scaleOrdinal(d3.schemeCategory10);
d3.json("https://gist.githubusercontent.com/mapio/53fed7d84cd1812d6a6639ed7aa83868/raw/760d5793f3596c82856d4a84f9b7a84851456027/miserables.json").then(function(graph) {
var label = {
    'nodes': [],
    'links': []
};
graph.nodes.forEach(function(d, i) {
    label.nodes.push({node: d});
    label.nodes.push({node: d});
    label.links.push({
        source: i * 2,
        target: i * 2 + 1
    });
});
var labelLayout = d3.forceSimulation(label.nodes)
    .force("charge", d3.forceManyBody().strength(-50))
    .force("link", d3.forceLink(label.links).distance(0).strength(2));
var graphLayout = d3.forceSimulation(graph.nodes)
    .force("charge", d3.forceManyBody().strength(-3000))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("x", d3.forceX(width / 2).strength(1))
    .force("y", d3.forceY(height / 2).strength(1))
    .force("link", d3.forceLink(graph.links).id(function(d) {return d.id; }).distance(50).strength(1))
    .on("tick", ticked);
var adjlist = [];
graph.links.forEach(function(d) {
    adjlist[d.source.index + "-" + d.target.index] = true;
    adjlist[d.target.index + "-" + d.source.index] = true;
});
function neigh(a, b) {
    return a == b || adjlist[a + "-" + b];
}
var svg = d3.select("#viz").attr("width", width).attr("height", height);
var container = svg.append("g");
svg.call(
    d3.zoom()
        .scaleExtent([.1, 4])
        .on("zoom", function() { container.attr("transform", d3.event.transform); })
);
var link = container.append("g").attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter()
    .append("line")
    .attr("stroke", "#aaa")
    .attr("stroke-width", "1px");
var node = container.append("g").attr("class", "nodes")
    .selectAll("g")
    .data(graph.nodes)
    .enter()
    .append("circle")
    .attr("r", 5)
    .attr("fill", function(d) { return color(d.group); })
node.on("mouseover", focus).on("mouseout", unfocus);
node.call(
    d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended)
);
var labelNode = container.append("g").attr("class", "labelNodes")
    .selectAll("text")
    .data(label.nodes)
    .enter()
    .append("text")
    .text(function(d, i) { return i % 2 == 0 ? "" : d.node.id; })
    .style("fill", "#555")
    .style("font-family", "Arial")
    .style("font-size", 12)
    .style("pointer-events", "none"); // to prevent mouseover/drag capture
node.on("mouseover", focus).on("mouseout", unfocus);
function ticked() {
    node.call(updateNode);
    link.call(updateLink);
    labelLayout.alphaTarget(0.3).restart();
    labelNode.each(function(d, i) {
        if(i % 2 == 0) {
            d.x = d.node.x;
            d.y = d.node.y;
        } else {
            var b = this.getBBox();
            var diffX = d.x - d.node.x;
            var diffY = d.y - d.node.y;
            var dist = Math.sqrt(diffX * diffX + diffY * diffY);
            var shiftX = b.width * (diffX - dist) / (dist * 2);
            shiftX = Math.max(-b.width, Math.min(0, shiftX));
            var shiftY = 16;
            this.setAttribute("transform", "translate(" + shiftX + "," + shiftY + ")");
        }
    });
    labelNode.call(updateNode);
}
function fixna(x) {
    if (isFinite(x)) return x;
    return 0;
}
function focus(d) {
    var index = d3.select(d3.event.target).datum().index;
    node.style("opacity", function(o) {
        return neigh(index, o.index) ? 1 : 0.1;
    });
    labelNode.attr("display", function(o) {
      return neigh(index, o.node.index) ? "block": "none";
    });
    link.style("opacity", function(o) {
        return o.source.index == index || o.target.index == index ? 1 : 0.1;
    });
}
function unfocus() {
   labelNode.attr("display", "block");
   node.style("opacity", 1);
   link.style("opacity", 1);
}
function updateLink(link) {
    link.attr("x1", function(d) { return fixna(d.source.x); })
        .attr("y1", function(d) { return fixna(d.source.y); })
        .attr("x2", function(d) { return fixna(d.target.x); })
        .attr("y2", function(d) { return fixna(d.target.y); });
}
function updateNode(node) {
    node.attr("transform", function(d) {
        return "translate(" + fixna(d.x) + "," + fixna(d.y) + ")";
    });
}
function dragstarted(d) {
    d3.event.sourceEvent.stopPropagation();
    if (!d3.event.active) graphLayout.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
}
function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
}
function dragended(d) {
    if (!d3.event.active) graphLayout.alphaTarget(0);
    d.fx = null;
    d.fy = null;
}
}); // d3.json
</script>
</html>

Answer 1

如您所提供的链接所示，当用户单击某个节点时，如果该节点中的数据包含在 children 对象中，则数据将移动到名为 _children的对象中，并且 children 对象中的数据将无效，反之亦然，如果用户单击没有 children 的节点，则 _children 对象将移动到子对象，并且 _children 无效。

链接数组具有节点的子节点，但它们未连接在一起
分组子项：

let data = 'miserables.json' ; // [ JSON DATA HERE] let new_arr = [] data.nodes.forEach(function(el) { new_arr = { id: el.id, children: data.links.filter(item => item.source == el.id) } })

附加点击事件：

var node = container.append("g").attr("class", "nodes") .selectAll("g") .data(graph.nodes) .enter() .append("circle") .attr("r", 5) .attr("fill", function(d) { return color(d.group); }) .on("click", click) // Toggle children on click. function click(d) { if (!d3.event.defaultPrevented) { // if there children, move them to _children and clear data in children if (d.children) { d._children = d.children; d.children = null; } else { // if no children, move data from _children to children and clear data in _children d.children = d._children; d._children = null; } } }

如何折叠（显示和隐藏）d3.js中父节点的子节点？

1 个答案: