Question

我的Circle Packing Graph功能在这里：

displayFlareGraph: function (containerId, options, json) {
        options.width = options.width || 1280; // circle width
        options.height = options.height || 800; // circle height
        options.radius = options.radius || 720; // circle radius
        var w = options.width,
            h = options.height,
            r = options.radius,
            x = d3.scale.linear().range([0, r]),
            y = d3.scale.linear().range([0, r]),
            node,
            root;

        var pack = d3.layout.pack()
            .size([r, r])
            .value(function (d) { return d.size; })

        var vis = d3.select(containerId).insert("svg:svg", "h2")
            .attr("width", w)
            .attr("height", h)
            .append("svg:g")
            .attr("transform", "translate(" + (w - r) / 2 + "," + (h - r) / 2 + ")");

        function zoom(d, i) {
            var k = r / d.r / 2;
            x.domain([d.x - d.r, d.x + d.r]);
            y.domain([d.y - d.r, d.y + d.r]);

            var t = vis.transition()
                .duration(d3.event.altKey ? 7500 : 750);

            t.selectAll("circle")
                .attr("cx", function (d) { return x(d.x); })
                .attr("cy", function (d) { return y(d.y); })
                .attr("r", function (d) { return k * d.r; });

            t.selectAll("text")
                .attr("x", function (d) { return x(d.x); })
                .attr("y", function (d) { return y(d.y); })
                .style("opacity", function (d) { return k * d.r > 20 ? 1 : 0; });

            node = d;
            d3.event.stopPropagation();
        }//zoom

        node = root = json;
        var nodes = pack.nodes(root);
        vis.selectAll("circle")
            .data(nodes)
            .enter().append("svg:circle")
            .attr("class", function (d) { return d.children ? "parent" : "child"; })
            .attr("cx", function (d) { return d.x; })
            .attr("cy", function (d) { return d.y; })
            .attr("r", function (d) { return d.r; })
            .on("click", function (d) { return zoom(node == d ? root : d); });

        vis.selectAll("text")
            .data(nodes)
            .enter().append("svg:text")
            .attr("class", function (d) { return d.children ? "parent" : "child"; })
            .attr("x", function (d) { return d.x; })
            .attr("y", function (d) { return d.y; })
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .style("opacity", function (d) { return d.r > 20 ? 1 : 0; })
            .text(function (d) { return d.name; });

        d3.select(window).on("click", function () { zoom(root); });

    }//displayFlareGraph

我必须迁移到版本4.有几个问题，首先是d3.hierarchy.pack而不是d3.layout.pack。这似乎非常棘手。

这是V4的示例：https://bl.ocks.org/mbostock/467f1a0db47753cc630e但是在尝试转换时出现了几个错误

var pack = d3.layout.pack()
            .size([r, r])
            .value(function (d) { return d.size; })

到

var pack = d3.hierarchy.pack()
            .size([r, r])

我首先得到TypeError: d3.hierarchy.pack is not a function

我正在使用

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-cloud/1.2.5/d3.layout.cloud.min.js" ></script>

将D3 Circle Packing Graph从V3升级到V4

0 个答案: