Я пытаюсь визуализировать d3js со стороны сервера, используя node.js и expressjs.
Уже несколько часов пытаюсь зарегистрировать события наведения мыши, но никак не могу заставить его работать. Мой SVG рендеринга, и я могу изменить атрибуты, но mouseover и mouseout просто не обнаружены. Плюс ко всему, все примеры, которые я могу найти, относятся к более ранним версиям D3, и большая часть API изменилась. Такое ощущение, что я что-то неправильно понимаю. но не могу понять, что это такое.
Очень нужна помощь.
Я новичок в D3js, поэтому, пожалуйста, дайте мне знать, если я пропустил некоторые детали.
Большое спасибо заранее.
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);