d3js甜甜圈图 - 突出显示第一个数据[关闭]答案

【问题标题】：d3js donut chart - highlight first data [closed]d3js甜甜圈图 - 突出显示第一个数据[关闭]
【发布时间】：2019-08-12 16:15:31
【问题描述】：

在我的项目中，我需要创建一个圆环图，所以我使用的是 d3js。创建图表后在页面加载时，图表的第一个值应突出显示，该值应显示在中心

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> D3 Js Example </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>

    <div id="my_dataviz"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js" ></script>
    <script>
var width = 450
    height = 450
    margin = 40

var radius = Math.min(width, height) / 2 - margin

var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var data = {a: 9, b: 20, c:30, d:8, e:12}

var color = d3.scaleOrdinal()
  .domain(data)
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])

var pie = d3.pie()
  .value(function(d) {return d.value; })
var data_ready = pie(d3.entries(data))

  
svg
  .selectAll('whatever')
  .data(data_ready)
  .enter()
  .append('path')
  .attr('d', d3.arc()
    .innerRadius(100)         
    .outerRadius(radius)
  )
  .attr('fill', function(d){ return(color(d.data.key)) })
  .attr("stroke", "black")
  .style("stroke-width", "2px")
  .style("opacity", 0.7)
    </script>
</body>
</html>

【问题讨论】：

在纯 d3 中，我相信这是相当多的工作，你可以尝试使用 d3pie（一个 d3 插件，他们甚至有一个生成器），仅此一项就可以处理悬停效果，并且所有相关的标签和标题，对于阴影，简单的方法是对 svg 应用阴影，希望它能给你一些方向

标签： javascript jquery d3.js

【解决方案1】：

弧形函数为构成甜甜圈段的每个path 元素的d 属性生成内容。

因此，一种方法是使用不同的弧形生成器来绘制第一段（具有不同的内半径和外半径设置），而不是用于绘制其他段。您可以使用attr() 方法的函数的第二个参数，它是您的数据的索引（参见示例）。

你可以对颜色做同样的事情。对于第一段的填充属性，请指定您的特定突出显示颜色，否则使用您的色标生成它：

var normalArc = d3.arc().innerRadius(100).outerRadius(185);
var biggerArc = d3.arc().innerRadius(85).outerRadius(200);

svg
  .selectAll('whatever')
  .data(data_ready)
  .enter()
  .append('path')
  .attr('d', function(d, index) {
    // If this is the first segment make it a wider arc
    if(index === 0) {
      return biggerArc(d);
    } else {
      return normalArc(d);
    }
  })
  .attr('fill', function(d, index){ 
    // If this is the first segment, highlight it.
    if(index === 0) {
      return '#ff1dce';
    } else {
      return(color(d.data.key))
    }
  })
  .attr("stroke", "black")
  .style("stroke-width", "2px")
  .style("opacity", 0.7);

【讨论】：