D3.js v4：放大气泡图

Question

我有这个气泡图，想要放大以便能够看到非常小的气泡。我尝试了 Mike Bostock 的这个代码，但我没有成功获得良好的缩放功能，我认为这是因为我有另一个图表概念。

其他在线示例对有轴的图表应用缩放，但我的图表没有轴。

这是我的代码：

d3.json("Data/New/Treemap_source.json", function (error, data) {
        if (error) throw error;

        var diameter = 693;
        var color = d3.scaleOrdinal(d3.schemeCategory20);
        var format = function (d){ return "BTC " + d3.format(",.2f")(d); }

        var bubble = d3.pack(data)
            .size([diameter, diameter])
            .padding(1.5);

        var svg = d3.select("#bubblediv")
            .append("svg")
            .attr("width", diameter + margin.left + margin.right)
            .attr("height", diameter + margin.top + margin.bottom)
            .attr("class", "bubble");


        var nodes = d3.hierarchy(data)
            .sum(function(d) { return d.VolumeBTC; });


        var node = svg.selectAll(".node")
            .data(bubble(nodes).descendants())
            .enter()
            .filter(function(d){
                return  !d.children
            })
            .append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + (d.x + margin.left)+ "," + (d.y + margin.top+20) + ")";
            });

            node.on("click", function (d) {
            alert("This bubble contains: " + d.data.Symbol);
            // var sel = d.data.Symbol;
            d3.select('#my-select').property('value', d.data.Symbol);
            // print_filter(d3.select('#my-select').property('value', d.data.Symbol));
            // d3.select('#my-select').property('value', d.data.Symbol);
        });

        node.append("title")
            .text(function(d) {
                return d.data.Symbol + ": " + format(d.value);
            });

     d3.select("svg").append("text")
                        .attr("transform", "translate(" + (diameter / 2 -20) + " ,30)")
                        .attr('class','chartlabel')
                        .style("text-anchor", "middle")
                        .text("Altcoins Trading in BTC");

        node.append("circle")
            .attr("r", function(d) {
                return d.r;
            })
            .style('stroke', '#263432')
            .style('stroke-width', '1.5')
            .style("fill", function(d,i) {
                return color(i);
            });

        node.append("text")
            .attr("dy", ".2em")
            .style("text-anchor", "middle")
            .text(function(d) {
                return d.data.Symbol.substring(0, d.r / 3);
            })
            .attr("font-family", "sans-serif")
            .attr("font-size", function(d){
                return d.r/5;
            })
            .attr("fill", "white");

        node.append("text")
            .attr("dy", "1.3em")
            .style("text-anchor", "middle")
            .text(function(d) {
                return format(d.data.VolumeBTC);
            })
            .attr("font-family",  "Gill Sans", "Gill Sans MT")
            .attr("font-size", function(d){
                return d.r/6;
            })
            .attr("fill", "white");

        d3.select(self.frameElement)
            .style("height", diameter + "px");

    });

Answer 1

从 d3 v4 开始，您可以使用以下命令缩放任何

svg

：

function zoomed() {
  svg.attr("transform", d3.event.transform);
}

var zoom = d3.zoom().on("zoom", zoomed);

svg.call(zoom);

为了让它完全按照你想要的方式工作，你需要使用 d3-zoom： https://github.com/d3/d3-zoom

最后，您可能需要一个按钮来重置缩放，可以像这样完成：

d3.select('#zoom-reset-button').on("click", function() {
    zoom.transform(svg, d3.zoomIdentity);
});

Answer 2

您可以使用以下代码进行缩放

   // Add zoom in effect on mouseover
    node.on("mouseover", function () {
        d3.select(this)
            .transition()
            .duration(500)
            .ease(d3.easeLinear)
            .attr("transform", function (d) {
                return d3.select(this).attr("transform") + " scale(1.2)";
            }); // Scale up the circle by 20%
    });

    // Add zoom out effect on mouseout
    node.on("mouseout", function () {
        d3.select(this)
            .transition()
            .duration(500)
            .ease(d3.easeLinear)
            .attr("transform", function (d) {
                return d3
                    .select(this)
                    .attr("transform")
                    .replace(/scale\([^)]*\)/, "");
            }); // Remove the scale transformation
    });