Question

在我的项目中，我需要创建一个甜甜圈图，所以我正在使用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>

Answer 1

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

因此，一种方法是与绘制其他段相比，使用不同的弧形生成器绘制第一段（具有不同的内部和外部半径设置）。您可以使用提供给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);

d3js甜甜圈图-突出显示第一个数据

1 个答案: