Question

我有这个简单的代码，它实现了一个散点图（在angular 7应用程序中使用d3.js），在其中我想启用d3-lasso功能来选择点。因此，为了做到这一点，我安装了npm i d3-lasso和npm i d3-drag。

我正在执行的代码如下：

private buildChart() {

// Set the dimensions of the canvas / graph
let margin = {top: 20, right: 80, bottom: 60, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

let domainX = d3.extent(this.plotData.scatterDataList, function(d:any){
  return Number(d.x)
})

let domainY = d3.extent(this.plotData.scatterDataList, function(d:any){
  return Number(d.y)
})

// Define the x,y scale functions
let x = d3.scaleLinear()
.range([0, width])
.domain(domainX)
.nice();

let y = d3.scaleLinear()
.range([height, 0])
.domain(domainY)
.nice();

// Create the tooltip area
let tooltip = d3.select(this.chartElement.nativeElement).append("div")
.attr("class", "pca-tooltip")
.style("position","absolute")
.style("background-color", "#f5f5dcd4")
.style("padding","5px")
.style("border-radius","10px")
.style("opacity", 0);

// Tooltip's value parser
let xValue = function (d:any) {
  return d.x;
}; 
let yValue = function (d:any) {
  return d.y;
};

// Define colors
let color = d3.scaleOrdinal(d3.schemeCategory10);

// Prepare the SVG canvas
let svg = d3.select(this.chartElement.nativeElement)
.append('svg')
.attr('width', width + margin.left + margin.right )
.attr('height', height + margin.bottom + margin.top )

// Add the x Axis
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate("+ margin.left + "," + (height + margin.top) + ")")
.call(d3.axisBottom(x));

// Add the y Axis
svg.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(" + margin.left + ","+ (margin.top) +")")
.text(this.plotData.yaxis)
.call(d3.axisLeft(y));

// Add points
svg.selectAll(".dot")
.data(this.plotData.scatterDataList)
.enter().append("circle")
.attr("id", function (d:any, i:number) {
  return d.metadatas[0];
}) 
.attr("class", "dot")
.attr("cursor", "crosshair")
.attr("r", 3.5)
.attr("cx", function (d:any) {
  return x(d.x) + margin.left;
})
.attr("cy", function (d:any) {
  return y(d.y) + margin.top;
})
.style("fill", function (d:any) {
  return color(d.classname);
})
.on("mouseover", function (d:any) {
  tooltip.transition()
  .duration(200)
  .style("opacity", .9);
  tooltip.html(d.metadatas[0] + "<br/> (" + xValue(d).toFixed(2) + ", " + yValue(d).toFixed(2) + ")")
  .style("left", (d3.select(this).attr("cx")) + "px")
  .style("top", (d3.select(this).attr("cy")) + "px");
})
.on("mouseout", function (d) {
  tooltip.transition()
  .duration(500)
  .style("opacity", 0);
});


// Create the area where the lasso event can be triggered
let lasso_area = svg.append("rect")
.attr("width", width+margin.left)
.attr("height", height+margin.top)
.style("opacity", 0);

// Lasso functions
let lasso_start = function() {
  lasso().items()
  .attr("r",3.5)                                      // reset size
  .style("fill", null)                                // clear all of the fills
  .classed("not_possible",true)                       // style as not possible
  .classed("selected",false);                         // style as selected
};

let lasso_draw = function() {

  // Style the possible dots
  lasso().possibleItems()
  .classed("not_possible",false)
  .classed("possible",true);
  // Style the not possible dot
  lasso().notPossibleItems()
  .classed("not_possible",true)
  .classed("possible",false);
};

let lasso_end = function() {
  // Reset the color of all dots
  lasso().items()
  .classed("not_possible",false)
  .classed("possible",false);
  // Style the selected dots
  lasso().selectedItems()
  .classed("selected",true)
  .attr("r",7);
  // Reset the style of the not selected dots
  lasso().notSelectedItems()
  .attr("r",3.5);
};

lasso() 
.items(d3.selectAll("dot"))
.targetArea(lasso_area)                                   // area where the lasso can be started
.closePathSelect(true)                                    // can items be selected by closing the path?
.closePathDistance(75)                                    // max distance for the lasso loop to be closed
.hoverSelect(true)                                        // can items by selected by hovering over them?
.on("start", () => { lasso_start() })                     // lasso start functionality
.on("draw", () => { lasso_draw() })                       // lasso draw functionality
.on("end", () => { lasso_end() });                        // lasso end functionality


svg.call(lasso());  

}

在浏览器中，我收到以下错误消息。

ERROR ReferenceError: d3 is not defined
    at lasso (d3-lasso.js:776)
    at Selection.call (call.js:4)
    at PcaPlotComponent.push../src/app/dashComponents/plots/pca-plot/pca-plot.component.ts.PcaPlotComponent.buildChart (pca-plot.component.ts:177)
    at PcaPlotComponent.push../src/app/dashComponents/plots/pca-plot/pca-plot.component.ts.PcaPlotComponent.ngOnChanges (pca-plot.component.ts:19)
    at checkAndUpdateDirectiveInline (core.js:22095)
    at checkAndUpdateNodeInline (core.js:23363)
    at checkAndUpdateNode (core.js:23325)
    at debugCheckAndUpdateNode (core.js:23959)
    at debugCheckDirectivesFn (core.js:23919)
    at Object.eval [as updateDirectives] (AnalysisResultsComponent.html:152)

然后，如果我打开d3-lasso.js文件并查看776行，则会看到以下内容：

// Apply drag behaviors
var drag = d3.drag() <------ THIS IS THE LINE WHERE IT CRASHES
    .on("start",dragstart)
    .on("drag",dragmove)
    .on("end",dragend);

由此得出的结论是，我使用的是错误版本的d3-lasso，或者是d3-lasso存在一些问题，无法找到d3-drag模块。

如果对我在做什么错有任何想法或暗示，这将非常有用并受到欢迎。

编辑：

这是我的进口货

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

d3-lasso在Angular 7中找不到d3-drag模块

0 个答案: