Javascript D3js服务器端鼠标悬停事件不工作
我正在尝试使用node.js和expressjs从服务器端渲染d3js 几个小时来一直试图注册鼠标悬停事件，但似乎无法使其正常工作。我的svg正在渲染，我可以更改属性，但是没有检测到mouseover和mouseout。另外，我能找到的所有示例似乎都是D3的早期版本，而且大多数API都已更改。感觉好像我犯了一些基本的错误。但我想不出是什么 急需帮助 我是D3js的新手，所以如果我错过了一些细节，请告诉我 提前向你表示衷心的感谢Javascript D3js服务器端鼠标悬停事件不工作,javascript,node.js,express,d3.js,Javascript,Node.js,Express,D3.js,我正在尝试使用node.js和expressjs从服务器端渲染d3js 几个小时来一直试图注册鼠标悬停事件，但似乎无法使其正常工作。我的svg正在渲染，我可以更改属性，但是没有检测到mouseover和mouseout。另外，我能找到的所有示例似乎都是D3的早期版本，而且大多数API都已更改。感觉好像我犯了一些基本的错误。但我想不出是什么 急需帮助 我是D3js的新手，所以如果我错过了一些细节，请告诉我 提前向你表示衷心的感谢 var fs = require('fs'); var d3 = r
var fs = require('fs');
var d3 = require('d3');
var JSDOM = require('jsdom').JSDOM;
var express = require('express');
var app = express()
var chartWidth = 500,
chartHeight = 500;
var arc = d3.arc()
.outerRadius(chartWidth / 2 - 10)
.innerRadius(100);
var colours = ['#F00', '#000', '#000', '#000', '#000', '#000', '#000', '#000', '#000'];
function moveAndZoom() {
var t = d3.event.translate;
var s = d3.event.scale;
var x = Math.min(
(width / height) * (s - 1),
Math.max(width * (1 - s), t[0]));
var h = height / 4;
var y = Math.min(
h * (s - 1) + h * s,
Math.max(height * (1 - s) - h * s, t[1]));
mainGroup.style("stroke-width", ((1 / s) * 2) + "px");
mainGroup.attr('transform', 'translate(' + x + ',' + y + ')scale(' + s + ')');
}
var zoom = d3.zoom()
.scaleExtent([1, 5])
.on("zoom", moveAndZoom);
app.get('/', function (req, res) {
var pieData = [12, 31];
const window = (new JSDOM('<html><head></head><body></body></html>', {
pretendToBeVisual: true
})).window;
window.d3 = d3.select(window.document); //get d3 into the dom
// do yr normal d3 stuff
var svg = window.d3.select('body')
.append('div').attr('class', 'container') //make a container div to ease the saving process
.append('svg')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.attr('width', chartWidth)
.attr('height', chartHeight)
.append('g')
.attr('transform', 'translate(' + chartWidth / 2 + ',' + chartWidth / 2 + ')')
.style('pointer-events', "all");
// var svg = d3.select('body').attr('height', chartHeight).attr('width', chartWidth);
svg.selectAll('arc')
.data(d3.pie()(pieData))
.enter()
.append('path')
// .append('div')
.attr('class', 'arc')
.attr('d', arc)
// .call(zoom)
.attr('fill', function (d, i) {
return colours[i];
// console.log(d);
})
.attr('stroke', '#fff')
.attr('stroke-width', "20px")
.attr('stroke-opacity', 0.0)
.on('click', function (d, i) {
console.log("click", d);
})
.on('mouseover', function (d, i) {
console.log("mouseover", d);
d3.select(this).transition().duration(100).attr("stroke-opacity", 1.0);
})
.on('mouseout', function (d, i) {
console.log("mouseout", d);
d3.select(this).transition().duration(100).attr("stroke-opacity", 0.0);
})
res.send(window.d3.select('.container').html());
});
app.listen(3000);
var fs=require（'fs'）；
风险值d3=要求（'d3'）；
var JSDOM=require（'JSDOM'）.JSDOM；
var express=需要（“express”）；
var app=express（）
var chartWidth=500，
图表高度=500；
var arc=d3.arc（）
.外层（图表宽度/2-10）
.内半径（100）；
变量颜色=['#F00'、'#000'、'#000'、'#000'、'#000'、'#000'、'#000'、'#000'；
函数moveAndZoom（）{
var t=d3.event.translate；
var s=d3.event.scale；
var x=Math.min(
（宽度/高度）*（s-1），
数学最大值（宽度*（1-s），t[0]）；
var h=高度/4；
var y=Math.min(
h*（s-1）+h*s，
数学最大值（高度*（1-s）-h*s，t[1]）；
主组样式（“笔划宽度”（（1/s）*2）+“px”）；
attr（'transform'、'translate（'+x+'、'+y+'）比例（'+s+'））；
}
var zoom=d3.zoom（）
.scaleExtent（[1,5]）
.打开（“缩放”，移动和缩放）；
app.get（'/'，函数（req，res）{
var pieData=[12,31]；
常量窗口=（新JSDOM（“”{
假装正常：是的
})).窗口；
window.d3=d3.select（window.document）；//将d3放入dom
//你做正常的d3材料吗
var svg=window.d3.select（'body'）
.append（'div'）.attr（'class'，'container'）//创建容器div以简化保存过程
.append（'svg'）
.attr（'xmlns'，'http://www.w3.org/2000/svg')
.attr（'宽度'，图表宽度）
.attr（'高度'，图表高度）
.append（'g'）
.attr（'transform'，'translate（'+chartWidth/2+'，'+chartWidth/2+'））
.style（'pointer-events'，'all'）；
//var svg=d3.select（'body'）.attr（'height'，chartHeight）.attr（'width'，chartWidth）；
svg.selectAll（'arc'））
.data（d3.pie（）（pieData））
.输入（）
.append（'路径'）
//.append（'div'））
.attr（'class'，'arc'）
.attr（'d'，弧）
//.呼叫（缩放）
.attr（'fill'，函数（d，i）{
返回颜色[i]；
//控制台日志（d）；
})
.attr（'stroke'，'#fff'）
.attr（'笔划宽度'，“20px”）
.attr（'stroke-opacity'，0.0）
.on（'click'，函数（d，i）{
控制台日志（“单击”，d）；
})
.on（'mouseover'，函数（d，i）{
控制台日志（“鼠标悬停”，d）；
d3.选择（this）.transition（）.duration（100）.attr（“笔划不透明度”，1.0）；
})
.on（'mouseout'，函数（d，i）{
控制台日志（“鼠标出”，d）；
d3.选择（this）.transition（）.duration（100）.attr（“笔划不透明度”，0.0）；
})
res.send（window.d3.select（'.container'）.html（））；
});
app.listen（3000）；