Question

我正在尝试使用缩放创建散点图。在本地应用程序中运行以下代码后，我在我的angular应用程序中使用了它，并且在一定程度上可以正常工作。但是，将相同的代码放在Stackblitz中，缩放无法正常工作。我想实现缩放，其中缩放仅限于图形上的值。不应缩放轴，以接受两个轴中的值更改。完全类似：http://bl.ocks.org/peterssonjonas/4a0e7cb8d23231243e0e。

在此示例中，在缩放时，仅缩放值，并且相应地更改了轴值。它不会缩放整个图形绘图区域。我该如何实现？这是我的Stackblitz代码： https://stackblitz.com/edit/angular-hu2thj

答案： 最后，在将来有任何参考的情况下，我会找出该问题的图形：

import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import * as d3 from 'd3';

@Component({
    selector: 'app-scatterplot',
    templateUrl: './scatterplot.component.html',
    styleUrls: ['./scatterplot.component.css']
})
export class ScatterplotComponent implements OnInit {
    @ViewChild('chart1') private chartContainer: ElementRef;
    dataValue = [{ x: "67", y: "188", },
    { x: "200", y: "163" },
    { x: "254", y: "241" },
    { x: "175", y: "241" },

    ];
    ngOnInit() {
        this.graph();
    }

    graph() {

        const element = this.chartContainer.nativeElement;
        var svgWidth = 400;
        var svgHeight = 400;

        var margin = { top: 30, right: 40, bottom: 50, left: 60 };

        var width = svgWidth - margin.left - margin.right;
        var height = svgHeight - margin.top - margin.bottom;

        var originalCircle = {
            "cx": -150,
            "cy": -15,
            "r": 20
        };


        var svgViewport = d3.select(element)
            .append('svg')
            .attr('width', svgWidth)
            .attr('height', svgHeight)

        // create scale objects
        var x = d3.scaleLinear()
            .domain([1, 500])
            .range([0, width]);

        var y = d3.scaleLinear()
            .domain([1, 500])
            .range([height, 0]);


        // create axis objects
        var xAxis = d3.axisBottom(x);
        var yAxis = d3.axisLeft(y);


        // Zoom Function
        var zoom = d3.zoom()
            .on("zoom", zoomFunction);



        // Inner Drawing Space
        var innerSpace = svgViewport.append("g")
            .attr("class", "inner_space")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .call(zoom);




        // append some dummy data
        var data = innerSpace.selectAll("circle")
            .data(this.dataValue)
            .enter().append("circle")
            .attr("class", "dot")
            .attr("cx", function (d) {
                return x(d.x)
                    ;
            })
            .attr("cy", function (d) {
                return y(d.y);
            })
            .attr("r", 2);

        // Draw Axis
        var gX = innerSpace.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0, " + height + ")")
            .call(xAxis);

        var gY = innerSpace.append("g")
            .attr("class", "axis axis--y")
            .call(yAxis);



        // append zoom area
        var view = innerSpace.append("rect")
            .attr("class", "zoom")
            .attr("width", width)
            .attr("height", height - 10)
            .attr("fill", "transparent")
            .attr("fill-opacity", 0.1)
            .call(zoom)

        function zoomFunction() {
            // create new scale ojects based on event
            var new_xScale = d3.event.transform.rescaleX(x)
            var new_yScale = d3.event.transform.rescaleY(y)
            console.log(d3.event.transform)

            // update axes
            gX.call(xAxis.scale(new_xScale));
            gY.call(yAxis.scale(new_yScale));

            // update circle
            data.attr("transform", d3.event.transform)
        };

    }
}

Answer 1

堆栈闪电问题是d3.event是null。

尝试此操作以放大本地服务器中的点。

您需要添加一个剪切路径并为轴设置动画，请参见第二个示例（热图）

var svg = d3.select(element)
    .append("svg:svg")
    .attr("width", w + left_padding)
    .attr("height", h + top_padding);

var g = svg.append("g");
var zoom = d3.zoom().on("zoom", function () { 
        console.log("zoom", d3, d3.event);
        g.attr("transform", d3.event.transform);
    });

svg.call(zoom);

g.selectAll("circle")
    .data(this.dataValue)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", d => x(d.x) )
    .attr("cy", d => y(d.y) )
    .attr("r", 2);

散点图缩放在d3.js中无法正常工作

1 个答案: