Question

我正在为当前项目创建一个金字塔形视觉效果，并具有下面的代码，该代码仅创建一个三角形，但由于svg调整了大小，因此无法调整其大小。

我在互联网上收到以下代码，您能不能帮助我使用d3.js将此代码转换为打字稿代码，关键字（金字塔）对我不起作用。

我是Typescript和d3.js的新手。

var width = 700,
  height = 450,
  radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
  .range(["#255aee", "#3a6fff", "#4f84ff", "rgb(101,154,302)", "rgb(122,175,323)", "rgb(144,197,345)", "rgb(165,218,366)"]);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")

var data = [["region", "population"], ["Africa", "1110635000"], ["Americas", "972005000"], ["Asia", "4298723000"], ["Europe", "742452000"], ["Ocenia", "38304000"]];

d3.csv(/*"data.csv"*/data, function(error, data) {
  var pyramid = d3.pyramid()
    .size([width, height])
    .value(function(d) {
      return d.population;
    });

  var line = d3.svg.line()
    .interpolate('linear-closed')
    .x(function(d, i) {
      return d.x;
    })
    .y(function(d, i) {
      return d.y;
    });

  var g = svg.selectAll(".pyramid-group")
    .data(pyramid(data))
    .enter().append("g")
    .attr("class", "pyramid-group");

  g.append("path")
    .attr("d", function(d) {
      return line(d.coordinates);
    })
    .style("fill", function(d) {
      return color(d.region);
    });

  g.append("text")
    .attr({
      "y": function(d, i) {
        if (d.coordinates.length === 4) {
          return (((d.coordinates[0].y - d.coordinates[1].y) / 2) + d.coordinates[1].y) + 5;
        } else {
          return (d.coordinates[0].y + d.coordinates[1].y) / 2 + 10;
        }
      },
      "x": function(d, i) {
        return width / 2;
      }
    })
    .style("text-anchor", "middle")
    .text(function(d) {
      return d.region;
    });

  d3.select("body").append("table")
    .attr({
      "id": "footer",
      "width": width + "px"
    })

  d3.select("body #footer").append("tr")
    .attr({
      "class": "PykCharts-credits",
      "id": "credit-datasource"
    })
    .append("td")
    .style("text-align", "left")
    .html("<span style='pointer-events:none;'>Credits: </span><a href='http://pykcharts.com' target='_blank'>" + "Pykcharts" + "</a>");

});

body {
      font: 10px sans-serif;
    }
    
    .arc path {
      stroke: #fff;
    }

<html>
<head></head>
<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="https://s3-ap-southeast-1.amazonaws.com/charts.pykih.com/gists/pyramid.js"></script>
</body>
</html>

<!-- data.csv:
region,population
Africa,1110635000
Americas,972005000
Asia,4298723000
Europe,742452000
Ocenia,38304000
-->

i want to draw a simple pyramid visual in power bi

在打字稿中转换javascript代码以创建简单的金字塔

0 个答案: