在模块化ES6中使用D3

我正在尝试使用D3的阻力功能“拖动DOT”（SVG圆圈）。为了保持模块化，我有多个文件。从“ dot class”文件中实例化dot，在“ app.js”文件中可以使用！但是，阻力行为平坦。

我一直在这个工作了一段时间，修补和“谷歌搜索”。现在拉头发。我需要第二套眼睛。我怎么了？

谢谢！

dot.js：

import * as d3 from "d3";

export class Dot {
  constructor(cx, cy, rad){
    this.cx = cx;
    this.cy = cy;
    this.radius = rad;
    this.svg = null;
    this.dot = null;
    this.width = 199;
    this.height = 533;
  }

  buildDot(){
    this.dot =
    d3.select("body")
      .append("svg")
        .attr("width",this.width)
        .attr("height",this.height)
        .append("circle")
          .attr("cx",this.cx)
          .attr("cy",this.cy)
          .attr("r",this.radius);

    return this.dot;
  }

  onDrag(){
    console.log("dragging");
  }
}

app.js：

import {Dot} from './js/Dot';
import * as d3 from "d3";

(function(){

  var dot = new Dot(200, 200, 99).buildDot();
  console.log(dot);
  dot.call(d3.drag().on("drag", dot.onDrag));

})();

看答案

好的。因此，问题在于，当我“建造” dot，随后我问 drag EventListener致电 onDrag 在 dot 元素。这是，我没有打电话给 onDrag 来自“点”类实例的方法。

这么多时间...我来这里之前需要一种理智的检查方式。

智能推荐

ES6模块化的导入和导出

一、导出——export 步骤1：在html代码中引入js文件，script标签中加入 type=“module” ；步骤2：把需要共享的变量导出——export{ 变量 }；（1）导出变量导出方式1：导出方式2：（2）导出函数、类导出方式1：导出方式2：某些情况下，一个模块中包含某个的功能，我们并不希望给这个...

JS模块化——05——ES6规范

注意：包名是不能和github上别人的一样包下好之后，在package.json中可以看到安装好了之后设置配置文件.babelrc文件，在根目录下（与package.json同一目录下） babel工作原理是它的插件干活前先读配置文件，比如：意思是转换成es5 接下来创建文件目录...

redis中的hash扩容渐进式rehash过程

背景： redis字典（hash表）当数据越来越多的时候，就会发生扩容，也就是rehash 对比：java中的hashmap，当数据数量达到阈值的时候(0.75)，就会发生rehash，hash表长度变为原来的二倍，将原hash表数据全部重新计算hash地址，重新分配位置，达到rehash目的 redis中的hash表采用的是渐进式hash的方式： 1、redis字典（hash表）底层有...

不同系统下的回车\r和换行\n，及其历史

2019独角兽企业重金招聘Python工程师标准>>> 我们平时按下键盘上的‘回车键’，就能实现回车换行【我们在屏幕上所看到的就是光标移到了下一行的开头位置！！ps：不讨论软件实现的特殊功能，如word里的回车智能缩进】。因此对这个按键更准确说应该叫做‘回车换行键’ 就且将这种将光标移到下行开...

windows操作系统，python环境下django的自动安装

首先，在Windows操作系统下安装python，完成python环境的搭建。（我看有的博客需要配置环境变量，其实不必要，因为我们在安装的时候只要勾选如下图所示即可避免不必要的麻烦）第二步，使用快捷键windows+R或者点击如下图所示，之后点击运行在其中输入cmd即可进入dos命令。第三步，输入以下命令就会自动安装，等待安装完成即可。第四步，检测django是否安装成功，如果出现如下图...

猜你喜欢

Qt之日志输出文件

做过项目的童鞋可能都使用过日志功能，以便有异常错误能够快速跟踪、定位，Qt也提供的类似的机制。之前用Qt4做项目时使用的是Qt::qInstallMsgHandler()，到了Qt5，使用了新的Qt::qInstallMessageHandler()来替代，详情请查看Qt助手（C++ API changes）。描述助手中在C++ API ...

基于雇员流失率数据进行多分类模型训练及阈值调整实践-大数据ML样本集案例实战

版权声明：本套技术专栏是作者（秦凯新）平时工作的总结和升华，通过从真实商业环境抽取案例进行总结和分享，并给出商业应用的调优建议和集群环境容量规划等内容，请持续关注本套博客。QQ邮箱地址：[email protected]，如有任何学术交流，可随时联系。 1 数据的预处理分析 2 数据标准化处理 3 sklearn多模型封装（已废弃，学思想） 4 阈值概率调整 5 总结方便复习，整成笔记，内容粗略...

Exception: java.lang.OutOfMemoryError

　　最近在跑公司的项目的过程中我发现，当一个tomcat中运行多个项目的时候，就会报这个错误。我以前由于使用Maven-tomcat插件方式运行项目，所有没有遇到过这种情况。　　自己查了一下资料，但是后来我发现有些帖子中描述的解决方法：window–preferences—tomcat—JVM Setting ——append to J...

【C#】关于WinForm窗体程序的退出方法总结

很多人对于关闭窗口都有不同的需求，以下是关闭窗体的几种方法：一、关闭窗体 1. this.Close();仅仅是关闭当前窗口，若不是主窗体的话程序无法退出。 2. Application.Exit();强制所有消息终止，退出所有的窗体。 3. Application.ExitThread();强制终止调用线程上的所有消息。 4. System.Environment.Exit(0);最彻底的退出...

采用eclipse+jboss开发ejb3.0学习笔记

<v:shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,2...