如何实现点击D3.js环形图分区打开对应PDF链接

针对你的需求，这里提供两种可靠的实现方式，解决点击环形图分区打开对应PDF文件的问题：

方案一：使用SVG <a> 元素包裹路径 #

SVG有专属的<a>元素（属于SVG命名空间），可用来包裹图形元素实现跳转。你需要修改路径的创建逻辑，先创建<a>元素，再将路径附加到其中，并为每个<a>设置对应链接属性：

var dataSum = d3.sum(data, d=> d.value);

const color = d3.scaleOrdinal()
    .domain([domain])
    .range(colorRange)

const pie = d3.pie()
    .value(d=>d.value)
        
var dataSet = pie(data);

// 先创建SVG的a元素，再在其中添加path
selection
    .selectAll('slicesShadows')
    .data(dataSet)
    .join('a') // 替换为创建a元素
    .attr('href', d => d.data.link) // 设置PDF链接
    .attr('target', '_blank') // 可选：在新标签页打开
    .attr('xlink:href', d => d.data.link) // 兼容旧版浏览器
    .append('path') // 在a元素内添加路径
    .attr('d', d3.arc()
        .innerRadius(innerRadius)
        .outerRadius(radius)
    )
    .attr('fill', d => color(d.data))
    .attr('stroke', 'white')
    .style("stroke-width", "1px")
    .style("opacity", 0.7)
    .style('filter', 'url(#blur)');

方案二：添加点击事件处理函数 #

如果不想用<a>元素，可以直接为每个路径绑定点击事件，通过JavaScript实现跳转：

var dataSum = d3.sum(data, d=> d.value);

const color = d3.scaleOrdinal()
    .domain([domain])
    .range(colorRange)

const pie = d3.pie()
    .value(d=>d.value)
        
var dataSet = pie(data);

selection
    .selectAll('slicesShadows')
    .data(dataSet)
    .join('path')
    .attr('d', d3.arc()
        .innerRadius(innerRadius)
        .outerRadius(radius)
    )
    .attr('fill', d => color(d.data))
    .attr('stroke', 'white')
    .style("stroke-width", "1px")
    .style("opacity", 0.7)
    .style('filter', 'url(#blur)')
    .style('cursor', 'pointer') // 可选：添加鼠标指针样式，提示可点击
    .on('click', function(event, d) {
        // 在新标签页打开PDF
        window.open(d.data.link, '_blank');
        // 或者在当前页打开：window.location.href = d.data.link;
    });

你之前尝试失败的常见原因 #

• 用HTML的<a>包裹SVG路径：SVG元素需要在SVG命名空间下，直接用HTML的<a>包裹会导致浏览器无法正确识别跳转逻辑，必须使用SVG的<a>元素。
• 点击事件未正确获取链接：如果之前的onClick无效，可能是没有正确访问d.data.link（D3的事件处理函数中，第二个参数才是绑定的数据对象），或者路径元素没有设置可点击的光标样式，导致用户误以为无法点击。

内容的提问来源于stack exchange，提问作者Nicole Evans