Question

我正在尝试编辑此代码（由d3.js v3中的其他人编写），该代码显示极地面积图以使其在d3.js v5中起作用。我通过阅读d3 github页面上的API参考并编辑导致问题的行来进行尝试，但是我似乎无法使其正常工作。

这是原始代码：

  var outerWidth = 960;
  var outerHeight = 500;
  var margin = { left: 11, top: 75, right: 377, bottom: 88 };
  var radiusMax = 231;

  var xColumn = "name";

  var colorColumn = "religion";
  var radiusColumn = "population";

  var innerWidth  = outerWidth  - margin.left - margin.right;
  var innerHeight = outerHeight - margin.top  - margin.bottom;

  var svg = d3.select("body").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight)
    .attr("viewBox", "0 0 600 600");
  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  var xAxisG = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + innerHeight + ")");
  var pieG = g.append("g")
    .attr("id", "g1");

  var colorLegendG = g.append("g")
    .attr("class", "color-legend")
    .attr("transform", "translate(595, -36)");

  var xScale = d3.scale.ordinal().rangePoints([0, innerWidth]);
  var radiusScale = d3.scale.sqrt().range([0, radiusMax]);
  var colorScale = d3.scale.category10();

  var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
    .outerTickSize(0);

  var pie = d3.layout.pie();
  var arc = d3.svg.arc();

  var colorLegend = d3.legend.color()
    .scale(colorScale)
    .shapePadding(3)
    .shapeWidth(40)
    .shapeHeight(40)
    .labelOffset(4);

  function render(data){
    console.log("we");
    xScale.domain(data.map( function (d){ return d[xColumn]; }));
    radiusScale.domain([0, d3.max(data, function (d){ return d[radiusColumn]; })]);
    colorScale.domain(data.map(function (d){ return d[colorColumn]; }));

    pie.value(function (){ return 1; });
    arc.outerRadius(function(d) { 
      return radiusScale(d.data[radiusColumn]);
    });

    var pieData = pie(data);

    pieG.attr("transform", "translate(" + innerWidth / 2 + "," + innerHeight / 2 + ")");

    var slices = pieG.selectAll("path").data(pieData);
    slices.enter().append("path");
    slices
      .attr("d", arc)
      .attr("fill", function (d){ return colorScale(d.data[colorColumn]); });
    slices.exit().remove();

    xAxisG.call(xAxis);
    colorLegendG.call(colorLegend);
  }

  function type(d){
    d.name = "World";
    d.population = +d.population;
    return d;
  }

  d3.csv("test.csv", type, render);

这是test.csv：

religion,population
Christian,2173100000
Muslim,1598360000
Unaffiliated,1126280000
Hindu,1032860000
Buddhist,487320000
Folk Religions,404890000
Other Religions,57770000
Jewish,13640000

这是我尝试过的，但未成功：

var outerWidth = 960;
var outerHeight = 500;
var margin = { left: 11, top: 75, right: 377, bottom: 88 };
var radiusMax = 231;

var xColumn = "name";

var colorColumn = "religion";
var radiusColumn = "population";

var innerWidth  = outerWidth  - margin.left - margin.right;
var innerHeight = outerHeight - margin.top  - margin.bottom;

var svg = d3.select("body").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight)
    .attr("viewBox", "0 0 600 600");
var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + innerHeight + ")");
var xAxisG = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + innerHeight + ")");
var pieG = g.append("g")
    .attr("id", "g1");

var colorLegendG = g.append("g")
    .attr("class", "color-legend")
    .attr("transform", "translate(595, -36)");

var xScale = d3.scalePoint().range([0, innerWidth]);
var radiusScale = d3.scaleSqrt().range([0, radiusMax]);
var colorScale = d3.scaleOrdinal(d3.schemeCategory10);

var xAxis = d3.axisBottom(xScale).tickSizeOuter(0);

var pie = d3.pie();
var arc = d3.arc();

/*  Commented because don't know how to convert
var colorLegend = d3.color()
.shapePadding(3)
.shapeWidth(40)
.shapeHeight(40)
.labelOffset(4); */

function render(data){
console.log(data);
var data = data;
xScale.domain(data.map( function (d){ return d[xColumn]; }));
radiusScale.domain([0, d3.max(data, function (d){ return d[radiusColumn]; })]);
colorScale.domain(data.map(function (d){ return d[colorColumn]; }));

pie.value(function (){ return 1; });
arc.outerRadius(function(d) { 
  return radiusScale(d.data[radiusColumn]);
});

var pieData = pie(data);
console.log(pieData);
pieG.attr("transform", "translate(" + innerWidth / 2 + "," + innerHeight / 2 + ")");

var slices = pieG.selectAll("path").data(pieData);
slices.enter().append("path");
slices
  .attr("d", arc)
  .attr("fill", "pink");
slices.exit().remove();

xAxisG.call(xAxis);
// colorLegendG.call(colorLegend); same as above
}

function type(d){
d.name = "World";
d.population = +d.population;
return d;
}

d3.csv("test.csv").then(type).then(render);

将d3.js v3转换为v5

0 个答案: