Question

我正在尝试使用node.js和expressjs从服务器端渲染d3js。

曾经尝试将鼠标悬停事件注册几个小时，但似乎无法使其正常工作。我的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);

D3js服务器端鼠标悬停事件不起作用

0 个答案: