Estoy tratando de volver a escribir el código a continuación en vuejs.

 var tooltipLine = d3.select('#groupG').append('line') var x = d3.time.scale().range([0, that.width]); x.domain([that.graphData[0].soldOn, that.graphData[that.graphData.length - 1].soldOn]); const date = x.invert(d3.mouse(tooltipBox.node())[0]); tooltipLine.attr('stroke', 'black') .attr('x1', (Math.ceil(x(date)/that.barWidth) * (that.barWidth/2)) + (Math.floor(x(date)/that.barWidth) * (that.barWidth/2))) .attr('x2', (Math.ceil(x(date)/that.barWidth) * (that.barWidth/2)) + (Math.floor(x(date)/that.barWidth) * (that.barWidth/2))) .attr('y1', 0) .attr('y2', that.height);

En Vuejs (en la sección de plantillas)

 <line stroke="none" id="tooltip-line" :x1="x1" :x2="x2" y1="0" :y2="height"></line> computed: { x1() { var x = d3.time.scale().range([0, this.width]); x.domain([this.graphData[0].soldOn, this.graphData[this.graphData.length - 1].soldOn]); console.log("Tooltip Line", this.tooltipLine); //this leads to null const date = x.invert(d3.mouse(this.tooltipRect.node())[0]); return (Math.ceil(x(date)/this.barWidth) * (this.barWidth/2)) + (Math.floor(x(date)/this.barWidth) * (this.barWidth/2)); } }

Por favor, compruebe la salida a continuación:

La información sobre herramientas en vuejs d3.select('#tooltip-line') da nulo

Información sobre herramientas en JS d3.select('#groupG').append('line') da objeto de línea