Question

我有6个圆环图，其中上半部分代表英格兰北部的5个城市，而底部3代表南英格兰的5个城市。

每张图表代表就业，失业或其他。帆布被分为3个svgs，第一个就业数据，第二个失业和第三个。我对布局感到满意，但我觉得可以改进数据的结构。

我努力将文字（它的价值观）附加到视觉上（我尝试的所有东西都不起作用），但我怀疑它是因为每个数据集都是如此是一个它自己的数组，而不是将它分组为一个名为数据的巨型数据结构，或者其他任何东西。

但是，我不确定对我需要的是否是正确的方法？或者我现在已经足够了，我错过了追加它的价值观的东西？

我还没有包含任何代码来应用文本，因为我认为数据结构是错误的。

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <title>Donuts</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
</head>

<style>
  .container1 {
    width: 355px;
    position: absolute;
    flex-direction: column;
    font-size: 10px;
  }
  
  .container2 {
    width: 355px;
    position: absolute;
    flex-direction: column;
    transform: translate(400px, 0px);
  }
  
  .container3 {
    width: 355px;
    position: absolute;
    flex-direction: column;
    transform: translate(800px, 0px);
  }
</style>

<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <div class="container1" id="svg1"></div>
  <div class="container2" id="svg2"></div>
  <div class="container3" id="svg3"></div>
  <script>
    var employed1 = [{
      City: 'Bradford City',
      Percentage: 54.63
    }, {
      City: 'Leeds',
      Percentage: 62.19
    }, {
      City: 'Liverpool',
      Percentage: 55.62
    }, {
      City: 'Manchester',
      Percentage: 60.50
    }, {
      City: 'Sheffield',
      Percentage: 59.03
    }];

    var employed2 = [{
      City: 'Brighton',
      Percentage: 65.29
    }, {
      City: 'Bristol',
      Percentage: 66.72
    }, {
      City: 'Luton',
      Percentage: 62.87
    }, {
      City: 'Milton Keynes',
      Percentage: 67.80
    }, {
      City: 'Southampton',
      Percentage: 67.36,
    }];

    var unemployed1 = [{
      City: 'Bradford City',
      Percentage: 15.52
    }, {
      City: 'Leeds',
      Percentage: 6.96
    }, {
      City: 'Liverpool',
      Percentage: 9.76
    }, {
      City: 'Manchester',
      Percentage: 10.71
    }, {
      City: 'Sheffield',
      Percentage: 5.33
    }];

    var unemployed2 = [{
      City: 'Brighton',
      Percentage: 5.33
    }, {
      City: 'Bristol',
      Percentage: 5.51
    }, {
      City: 'Luton',
      Percentage: 8.50
    }, {
      City: 'Milton Keynes',
      Percentage: 5.17
    }, {
      City: 'Southampton',
      Percentage: 5.44
    }];

    var other1 = [{
      City: 'Bradford City',
      Percentage: 29.85
    }, {
      City: 'Leeds',
      Percentage: 30.85
    }, {
      City: 'Liverpool',
      Percentage: 34.62
    }, {
      City: 'Manchester',
      Percentage: 28.79
    }, {
      City: 'Sheffield',
      Percentage: 33.76
    }];

    var other2 = [{
      City: 'Brighton',
      Percentage: 29.38
    }, {
      City: 'Bristol',
      Percentage: 27.77
    }, {
      City: 'Luton',
      Percentage: 28.63
    }, {
      City: 'Milton Keynes',
      Percentage: 27.03
    }, {
      City: 'Southampton',
      Percentage: 27.30
    }];

    const NE = ["Bradford City", "Leeds", "Liverpool", "Manchester", "Sheffield"];

    var colorNE = d3.scaleOrdinal()
      .domain(NE)
      .range(["#A8A7A7", "#2F9599", "#E8175D", "#474747", "#CC527A"]);

    const SE = ["Brighton", "Bristol", "Luton", "Milton Keynes", "Southampton"];

    var colorSE = d3.scaleOrdinal()
      .domain(SE)
      .range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D"]);

    var mentalHealthAndAlcoholPie = d3.pie()
      .value(function(d) {
        return d.Percentage
      })
      .sort(function(a, b) {
        return a.City.localeCompare(b.City);
      });

    var arcGenerator = d3.arc()
      .innerRadius(100)
      .outerRadius(135)
      .padAngle(.02)
      .padRadius(50);

    draw("svg1", employed1);
    draw("svg1", employed2);
    draw("svg2", unemployed1);
    draw("svg2", unemployed2);
    draw("svg3", other1);
    draw("svg3", other2);

    function draw(selector, data) {

      var arcData = mentalHealthAndAlcoholPie(data);

      var svg = d3.select("#" + selector)
        .append("svg")
        .attr("width", 1000)
        .attr("height", 391)
        .append("g")
        .attr("transform", "translate(200, 240)");

      svg.selectAll(null)
        .data(arcData)
        .enter()
        .append('path')
        .attr("fill", function(d) {
          var result = null;

          if (NE.indexOf(d.data.City) >= 0) {
            result = colorNE(d.data.City);
          } else if (SE.indexOf(d.data.City) >= 0) {
            result = colorSE(d.data.City);
          } else {

            result = "white";
          }
          return result;
        })
        .style("stroke", "white")
        .attr('d', arcGenerator);
    }
  </script>
</body>

</html>

＆＃13;

Answer 1

...我怀疑它是因为每个数据集都是它自己的数组。

完全没有。现在的数据结构实际上是正确的：每个甜甜圈都有自己的数据作为内部数组。因此，与使用arcData绘制甜甜圈的方式相同，使用它来打印标签：

var labels = svg.selectAll(null)
    .data(arcData)
    .enter()
    .append('text')
    .text(function(d){
        return d.value
    });

以下是您更改的代码：

＆＃13;

<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <title>Donuts</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
</head>

<style>
  .container1 {
    width: 355px;
    position: absolute;
    flex-direction: column;
    font-size: 10px;
  }
  
  .container2 {
    width: 355px;
    position: absolute;
    flex-direction: column;
    transform: translate(400px, 0px);
  }
  
  .container3 {
    width: 355px;
    position: absolute;
    flex-direction: column;
    transform: translate(800px, 0px);
  }
</style>

<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <div class="container1" id="svg1"></div>
  <div class="container2" id="svg2"></div>
  <div class="container3" id="svg3"></div>
  <script>
    var employed1 = [{
      City: 'Bradford City',
      Percentage: 54.63
    }, {
      City: 'Leeds',
      Percentage: 62.19
    }, {
      City: 'Liverpool',
      Percentage: 55.62
    }, {
      City: 'Manchester',
      Percentage: 60.50
    }, {
      City: 'Sheffield',
      Percentage: 59.03
    }];

    var employed2 = [{
      City: 'Brighton',
      Percentage: 65.29
    }, {
      City: 'Bristol',
      Percentage: 66.72
    }, {
      City: 'Luton',
      Percentage: 62.87
    }, {
      City: 'Milton Keynes',
      Percentage: 67.80
    }, {
      City: 'Southampton',
      Percentage: 67.36,
    }];

    var unemployed1 = [{
      City: 'Bradford City',
      Percentage: 15.52
    }, {
      City: 'Leeds',
      Percentage: 6.96
    }, {
      City: 'Liverpool',
      Percentage: 9.76
    }, {
      City: 'Manchester',
      Percentage: 10.71
    }, {
      City: 'Sheffield',
      Percentage: 5.33
    }];

    var unemployed2 = [{
      City: 'Brighton',
      Percentage: 5.33
    }, {
      City: 'Bristol',
      Percentage: 5.51
    }, {
      City: 'Luton',
      Percentage: 8.50
    }, {
      City: 'Milton Keynes',
      Percentage: 5.17
    }, {
      City: 'Southampton',
      Percentage: 5.44
    }];

    var other1 = [{
      City: 'Bradford City',
      Percentage: 29.85
    }, {
      City: 'Leeds',
      Percentage: 30.85
    }, {
      City: 'Liverpool',
      Percentage: 34.62
    }, {
      City: 'Manchester',
      Percentage: 28.79
    }, {
      City: 'Sheffield',
      Percentage: 33.76
    }];

    var other2 = [{
      City: 'Brighton',
      Percentage: 29.38
    }, {
      City: 'Bristol',
      Percentage: 27.77
    }, {
      City: 'Luton',
      Percentage: 28.63
    }, {
      City: 'Milton Keynes',
      Percentage: 27.03
    }, {
      City: 'Southampton',
      Percentage: 27.30
    }];

    const NE = ["Bradford City", "Leeds", "Liverpool", "Manchester", "Sheffield"];

    var colorNE = d3.scaleOrdinal()
      .domain(NE)
      .range(["#A8A7A7", "#2F9599", "#E8175D", "#474747", "#CC527A"]);

    const SE = ["Brighton", "Bristol", "Luton", "Milton Keynes", "Southampton"];

    var colorSE = d3.scaleOrdinal()
      .domain(SE)
      .range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D"]);

    var mentalHealthAndAlcoholPie = d3.pie()
      .value(function(d) {
        return d.Percentage
      })
      .sort(function(a, b) {
        return a.City.localeCompare(b.City);
      });

    var arcGenerator = d3.arc()
      .innerRadius(100)
      .outerRadius(135)
      .padAngle(.02)
      .padRadius(50);

    draw("svg1", employed1, "Employed");
    draw("svg1", employed2, "Employed");
    draw("svg2", unemployed1, "Unemployed");
    draw("svg2", unemployed2, "Unemployed");
    draw("svg3", other1, "Other");
    draw("svg3", other2, "Other");

    function draw(selector, data, title) {

      var arcData = mentalHealthAndAlcoholPie(data);

      var svg = d3.select("#" + selector)
        .append("svg")
        .attr("width", 1000)
        .attr("height", 391)
        .append("g")
        .attr("transform", "translate(200, 240)");

      var slices = svg.selectAll(null)
        .data(arcData)
        .enter()
        .append('path')
        .attr("fill", function(d) {
          var result = null;

          if (NE.indexOf(d.data.City) >= 0) {
            result = colorNE(d.data.City);
          } else if (SE.indexOf(d.data.City) >= 0) {
            result = colorSE(d.data.City);
          } else {

            result = "white";
          }
          return result;
        })
        .style("stroke", "white")
        .attr('d', arcGenerator);

      var labels = svg.selectAll(null)
        .data(arcData)
        .enter()
        .append('text')
        .style("font-size", "10px")
        .attr("text-anchor", "middle")
        .style("text-shadow", "0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff")
        .attr("transform", function(d) {
          return "translate(" + arcGenerator.centroid(d) + ")";
        })
        .text(function(d) {
          return d.value
        });
        
      var titleText = svg.append("text")
        .attr("text-anchor", "middle")
        .style("font-size", "14px")
        .text(title);

    }
  </script>
</body>

</html>

＆＃13;

PS：因为我不知道你会用什么颜色来打印带有白色阴影的黑色字体......也许不是最好的设计选项。

附加文本的数据结构不正确

1 个答案: