javascript - 单击 D3.js 中的特定节点时访问 JSON 中的值

Question

我在 D3 中使用 pack 布局，如下所示:

var margin = 20,
diameter = 500;

var color = d3.scale.linear()
//var color = ['steelblue','green','grey']
    //.domain([3, 4])
    .range(["steelblue", "#81CFE0", "darkslategrey"])
    .interpolate(d3.interpolateHcl);

var pack = d3.layout.pack()
    .padding(2)
    .size([diameter - margin, diameter - margin])
    .value(function(d) { return d.size; })

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

d3.json("data.json", function(error, root) {
    if (error) throw error;

    var focus = root,
    nodes = pack.nodes(root),
    view;

    var circle = svg.selectAll("circle")
        .data(nodes)
        .enter().append("circle")
        .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
        .style("fill", function(d) { return d.children ? color(d.depth) : null; })
        .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });

    var text = svg.selectAll("text")
        .data(nodes)
        .enter().append("text")
        .attr("class", "label")
        .style("fill", "black")
        .style("display", function(d) { return d.parent === root ? null : "none"; })
        .text(function(d) { return d.name; });

    var node = svg.selectAll("circle,text");

    d3.select("body")
        .data(nodes)
        .style("background", color(-1))

    zoomTo([root.x, root.y, root.r * 2 + margin]);

    function zoom(d) {
        var focus0 = focus; focus = d;

        var transition = d3.transition()
            .duration(d3.event.altKey ? 7500 : 750)
            .tween("zoom", function(d) {
                var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
                return function(t) { zoomTo(i(t)); };
            } );

        transition.selectAll("text")
            .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
            .style("fill", "darkslategrey")
            .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
            .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
    }

    function zoomTo(v) {
        var k = diameter / v[2]; view = v;
        node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
        circle.attr("r", function(d) { return d.r * k; });
    }
}); 
d3.select(self.frameElement).style("height", diameter + "px");

目前，如果单击node--leaf，它只会缩小。但我想改为提醒该节点的 JSON 中存储的 URL。

JSON 看起来像这样:

{
    "name": "Packages",
    "children": [
        {
            "name": "Talks",
            "children": [
                {
                    "name": "talk_1",
                    "size": 722,
                    "url": "www.example_1.com"
                },
                {
                    "name": "talk_2",
                    "size": 722,
                    "url": "www.example_2.com"
                },
                {
                    "name": "talk_3",
                    "size": 722,
                    "url": "www.example_3.com"
                }
            ]
        }
    ]
}

因此，如果我单击 talk_3 节点，我应该通过访问 d.url 获取 www.example_3.com。

Answer 1

您可以在点击函数中获取URL的访问权限，如下所示:

var circle = svg.selectAll("circle")
            .data(nodes)
            .enter().append("circle")
            .attr("class", function (d) {
            return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";
        })
            .style("fill", function (d) {
            return d.children ? color(d.depth) : null;
        })
            .on("click", function (d) {
              var win = window.open(d.url, '_blank');
              win.focus();
             console.log(d.url);
            if (focus !== d) zoom(d), d3.event.stopPropagation();
        });

在点击函数中，这将在新选项卡中打开 URL:

var win = window.open(d.url, '_blank');
win.focus();