Question

我之前开发过vuejs + d3.js + jit库项目。现在，我需要将悬停功能附加到d3.js svg元素以显示悬停元素信息的弹出对话框。我按照一些stackoverflow指令尝试了很多次。但所有这些都不适合我的。这是我的代码段。

allNodes.append("circle").attr("@mouseover", "console.log('test');");
allNodes.append("circle").attr(":v-on:mouseover", "console.log('dfdfd');");

上面的代码无论如何都不起作用，因为d3.js元素是在挂载vue组件时呈现的，而vue模板解析器不能编译v-on，@moverover属性。

但是下面的代码工作正常。

allNodes.append("circle").attr("onmouseover", "console.log('test');");

所以我认为我会将原生javascript函数附加到vue方法以显示弹出对话框。

但我不确定如何配置所有项目结构以及将原生函数放在项目中的位置。

请帮帮我。

感谢。

Answer 1

您可以在d3选择中使用.on("mouseover", this.vueMethod)，其中在Vue组件的this.vueMethod对象中定义了methods。

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ],
    todoHovered: "hover a circle"
  },
  mounted() {
    const svg = d3.select(this.$refs.chart)
      .append("svg")
        .attr("width", 400)
        .attr("height", 100);
    const circles = svg.selectAll("circle")
      .data(this.todos).enter()
      .append("circle")
        .attr("cx", 5)
        .attr("cy", (d,i) => 10 + i * 15)
        .attr("r", 5)
        .style("fill", d => d.done ? "green" : "red");
    circles.on("mouseover", this.showMessage)
  },
  methods: {
    showMessage(d) {
    	this.todoHovered = `${d.text} is ${d.done ? 'done' : 'not done'}`;
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>

<div id="app">
  <div ref="chart">
  </div>
  <p>
    Message: {{ todoHovered }}
  </p>
</div>

如何在vue js方法中捕获svg元素悬停事件以及如何将本机javascript悬停事件与vue方法结合

1 个答案: