javascript - vue 组件中的 d3.js - 如何将鼠标事件挂钩到元素?
问题描述
我有一个用于交互式 D3.js 地图的纯 javascript 工作代码,现在尝试从中创建一个 vue.js 组件。我已将所有函数定义为方法,并且没有收到任何警告或错误消息,但没有任何鼠标事件被挂钩。我已经尝试了 D3.js 方式 (.on("click", this.clickBG)) 以及 vue (.attr("v-on:click","clickBG")) 都没有成功。
// vorlage: https://dev.to/ignoreintuition/binding-data-to-charts-using-vue-components-and-d3-4i27
import * as d3 from 'd3';
export default {
props: ['data','vegbed'],
data: function () {
return {
gardenbox: {}
}
},
computed: {
displaywidth: function() { return 600; },
displayheight: function() { return this.displaywidth*(this.vegbed.length/this.vegbed.width); },
margin: function() { return {top: 0, right: 0, bottom: 0, left: 0}; }
},
methods: {
initalizeChart: function () {
this.drawGardenBox();
},
virtDia: function (realDia) {
return (this.displaywidth/this.vegbed.width)*realDia;
},
clickPlant: function() {
d3.selectAll(".selected").raise().classed("selected",false);
d3.select(_this).selectAll(".plant").raise().classed("selected", true);
d3.selectAll("#"+this.id).classed("selected", true);
},
clickBG: function() {
console.log("click");
d3.selectAll(".selected").raise().classed("selected",false);
},
draggedPlant: function(d) {
d3.select(this).attr("transform","translate("+(d.x = d3.event.x)+","+(d.y = d3.event.y)+")");
},
dragStartedPlant: function() {
d3.selectAll(".selected").raise().classed("selected",false);
d3.select(this).selectAll(".plant").raise().classed("selected", true);
d3.selectAll("#"+this.id).classed("selected", true);
//d3.event.sourceEvent.stopPropagation();
},
dragEndedPlant: function(d) {
},
refreshBed: function () {
let _this = this; // Workaround to call functions from inside callbacks
var gplant = this.gardenbox.selectAll("g")
.data(this.data).enter().append("g")
.attr("id", function(d){ return d.id; })
.attr("transform", function(d){ return "translate("+d.x+","+d.y+")"; })
.on("click", this.clickPlant)
//.attr("v-on:click","this.clickPlant")
.call(d3.drag()
.on("start", this.draggedPlant)
.on("drag", this.dragStartedPlant)
.on("end", this.dragEndedPlant));
gplant.append("circle") // max size
.attr('class', 'plant')
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return _this.virtDia(d.plant.adult_diameter); });
gplant.append("circle") // min size
.attr('class', 'plant')
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return _this.virtDia(d.plant.exposure_diameter); });
gplant.append("image")
.attr('class', 'plant')
.attr("xlink:href", function(d) { return d.picref; })
.attr("x", function(d) { return d.x-(d.picsize/2); })
.attr("y", function(d) { return d.y-(d.picsize/2); })
.attr("width", function(d) { return d.picsize; })
.attr("height", function(d) { return d.picsize; });
},
drawGardenBox: function () {
this.gardenbox = d3.select('#vegbedcontainer').append('svg')
.attr("width", this.displaywidth + this.margin.left + this.margin.right)
.attr("height", this.displayheight + this.margin.top + this.margin.bottom)
// hintergrund für deselect zeichen
var bg = this.gardenbox.append("g")
//.attr("v-on:click","clickBG");
.on("click", this.clickBG); // unselect on background click
bg.append("rect")
.attr('class', 'bg')
.attr("x", this.margin.left)
.attr("y", this.margin.top)
.attr("width", this.displaywidth + this.margin.left + this.margin.right)
.attr("height", this.displayheight + this.margin.top + this.margin.bottom)
}
},
// lifecycle events
mounted: function () { // <-- lifecycle events
console.log('VegBedEditor mounted.')
this.initalizeChart();
this.refreshBed();
},
// watch functions
watch: { // <-- watch functions
'data': {
handler: function (val) {
this.refreshBed();
},
deep: true
}
},
template: `<div id="vegbedcontainer"><!-- SVG goes here --></div>`
}
解决方案
这是在我的 Vue 应用程序中运行的一些实验的结果。
在 svg 背景上设置点击处理程序
drawGardenBox: function () {
this.gardenbox = d3.select('#vegbedcontainer').append('svg')
.attr("width", this.displaywidth + this.margin.left + this.margin.right)
.attr("height", this.displayheight + this.margin.top + this.margin.bottom)
var bg = d3.select('svg')
.on("click", this.clickBG); // unselect on background click
停止来自其他处理程序的点击传播
clickPlant: function() {
d3.selectAll(".selected").raise().classed("selected",false);
d3.select(_this).selectAll(".plant").raise().classed("selected", true);
d3.selectAll("#"+this.id).classed("selected", true);
d3.event.stopPropagation();
},
设置 d3.event
我只导入了 d3 库的选定部分,包括event
,但最初d3.event.stopPropagation()
由于d3.event
为空而失败。
由于这个问题importing d3.event into a custom build using rollup,我更改了event
导入,现在它可以工作了
import { select, selectAll, event, customEvent } from 'd3-selection'
import { zoom } from 'd3-zoom'
import { tree, hierarchy } from 'd3-hierarchy'
export const d3 = {
select,
selectAll,
tree,
hierarchy,
zoom,
// event,
get event() { return event; },
customEvent
}
推荐阅读
- angular - Ionic 4 Firestore 是否可以只读取文档的一部分?
- android - 收到分享意图后如何创建“交互框”?
- r - 绑定包含来自 lubridate 包的类间隔列的多个数据帧的行
- html - HTML/CSS:在悬停时显示一个元素,而其余部分是模糊的
- java - Why does my program has an error in the render method?
- flask - 更改 Flask/Dash 中的图标
- python - 恢复 tkinter 画布上的文本和输入框
- java - 使用 Mysql 数据库中的搜索结果刷新 Jtable?
- firebase - 如何存储相关的 Firebase 数据?
- android - 如何将directus sdk添加到android studio项目?