Javascript D3图表，用于按部门和整体可视化数据，并解释了算法

我需要创建D3图表，如下链接所示：

以下是图表的屏幕截图：

整体视图：

扇区视图：

我搜索了很多，但找不到任何代码库或相同的示例。因此，我不确定如何才能达到同样的效果

请共享代码/指针，以使用D3实现相同的图表

提前感谢,，

---

Manish Kumar

在下面的链接中可以找到图表的代码。它在网站的源代码中。我建议你从中学习，但我不会照搬

(function() {

var margin = {top: 20, right: 95, bottom: 10, left: 125},
    width = 970 - margin.left - margin.right,
    height,
    tickExtension = 20; // extend grid lines beyond scale range

var formatPercent = d3.format(".0%"),
    formatTenthPercent = d3.format(".1%"),
    formatNumber = d3.format(",.3s"),
    formatDollars = function(d) { return (d < 0 ? "-" : "") + "$" + formatNumber(Math.abs(d)).replace(/G$/, "B"); };

var nameAll = "S.\x26P.\xa0500 companies";

var x = d3.scale.linear()
    .domain([0, .6])
    .rangeRound([0, width - 60])
    .clamp(true)
    .nice();

var y = d3.scale.ordinal();

var y0 = d3.scale.ordinal()
    .domain([nameAll])
    .range([150]);

var r = d3.scale.sqrt()
    .domain([0, 1e9])
    .range([0, 1]);

var z = d3.scale.threshold()
    .domain([.1, .2, .3, .4, .5])
    .range(["#b35806", "#f1a340", "#fee0b6", "#d8daeb", "#998ec3", "#542788"].reverse());

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top")
    .ticks(5)
    .tickFormat(formatPercent);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickSize(-width + 60 - tickExtension * 2, 0)
    .tickPadding(6);

var quadtree = d3.geom.quadtree()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; });

var svg = d3.select(".g-graphic").append("svg")
    .attr("height", 420 + margin.top + margin.bottom)
    .attr("width", width + margin.left + margin.right)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.select(".g-graphic").append("svg")
    .style("margin-top", "20px")
    .attr("height", 80)
    .attr("width", width + margin.left + margin.right)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(renderChartKey);

var gx = svg.append("g")
    .attr("class", "g-x g-axis")
    .call(xAxis);

var tickLast = gx.selectAll(".g-x .tick:last-of-type");

tickLast.select("text")
    .text(function() { return "\u2265 " + this.textContent; });

tickLast.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("transform", "translate(" + width + ",0)")
  .select("text")
    .text("N.A.");

var titleX = gx.append("text")
    .attr("class", "g-title")
    .attr("y", -9)
    .style("text-anchor", "end");

titleX.append("tspan")
    .attr("x", -20)
    .style("font-weight", "bold")
    .text("Effective tax rate");

titleX.append("tspan")
    .attr("x", -20)
    .attr("dy", "1em")
    .text("2007-12");

d3.tsv("http://graphics8.nytimes.com/newsgraphics/2013/05/13/corporate-taxes/ee84b0191a75f5c652087293ab0efd4710e21f94/companies.tsv", type, function(error, companies) {
  var sectors = d3.nest()
      .key(function(d) { return d.sector; })
      .entries(companies);

  // Compute the overall rate for all data.
  var overallRate = rate(d3.sum(companies, taxes), d3.sum(companies, earnings));

  // Compute the overall rate by sector.
  sectors.forEach(function(d) {
    d.rate = rate(d3.sum(d.values, taxes), d3.sum(d.values, earnings));
  });

  // Sort sectors by ascending overall rate.
  sectors.sort(function(a, b) {
    return a.rate - b.rate;
  });

  // Compute the rate for each company.
  companies.forEach(function(d) {
    d.rate = rate(d.taxes, d.earnings);
  });

  height = 120 * sectors.length;

  y
      .domain(sectors.map(function(d) { return d.key; }))
      .rangePoints([10, height], 1);

  svg.append("g")
      .attr("class", "g-y g-axis g-y-axis-sector")
      .attr("transform", "translate(-" + tickExtension + ",0)")
      .call(yAxis.scale(y))
      .call(yAxisWrap)
      .style("stroke-opacity", 0)
      .style("fill-opacity", 0)
    .selectAll(".tick text,.tick tspan")
      .attr("x", -95)
      .style("text-anchor", "start");

  svg.append("g")
      .attr("class", "g-y g-axis g-y-axis-overall")
      .attr("transform", "translate(-" + tickExtension + ",0)")
      .call(yAxis.scale(y0))
      .call(yAxisWrap);

  var companyClip = svg.append("defs").selectAll("clipPath")
      .data(companies)
    .enter().append("clipPath")
      .attr("id", function(d, i) { return "g-clip-company-" + i; })
    .append("circle")
      .attr("cx", function(d) { return d.cx; })
      .attr("cy", function(d) { return d.cy - y0(nameAll); })
      .attr("r", function(d) { return r(d.capitalization) + 20; });

  var gVoronoi = svg.append("g")
      .attr("class", "g-voronoi")

  gVoronoi.selectAll("path")
      .data(companies)
    .enter().append("path")
      .attr("clip-path", function(d, i) { return "url(#g-clip-company-" + i + ")"; })
      .on("mouseover", mouseover)
      .on("mouseout", mouseout);

  gVoronoi.call(updateVoronoi,
      function(d) { return d.cx; },
      function(d) { return d.cy + y0(nameAll); },
      420);

  var sector = svg.append("g")
      .attr("class", "g-sector")
    .selectAll("g")
      .data(sectors)
    .enter().append("g")
      .attr("transform", function(d) { return "translate(0," + y(d.key) + ")"; });

  var sectorNote = d3.select(".g-sector-notes")
      .style("opacity", 0)
      .style("display", "none")
    .selectAll("div")
      .data(sectors)
    .enter().append("div")
      .attr("class", "g-sector-note")
      .style("top", function(d) { return y(d.key) + "px"; })
      .html(function(d) { return sectorNoteByName[d.key]; });

  var sectorCompany = sector.append("g")
      .attr("class", "g-sector-company")
    .selectAll("circle")
      .data(function(d) { return d.values; })
    .enter().append("circle")
      .attr("cx", function(d) { return d.cx; })
      .attr("cy", function(d) { return d.cy - y(d.sector) + y0(nameAll); })
      .attr("r", function(d) { return r(d.capitalization); })
      .style("fill", function(d) { return isNaN(d.rate) ? null : z(d.rate); })
      .on("mouseover", mouseover)
      .on("mouseout", mouseout);

  var sectorOverall = sector.append("g")
      .attr("class", "g-overall")
      .attr("transform", function(d) { return "translate(" + x(d.rate) + "," + (y0(nameAll) - y(d.key)) + ")"; })
      .style("stroke-opacity", 0)
      .style("fill-opacity", 0);

  sectorOverall.append("line")
      .attr("y1", -100)
      .attr("y2", +127);

  var sectorOverallText = sectorOverall.append("text")
      .attr("y", -106);

  sectorOverallText.append("tspan")
      .attr("x", 0)
      .text(function(d) { return formatPercent(d.rate); });

  sectorOverallText.filter(function(d, i) { return !i; }).append("tspan")
      .attr("x", 0)
      .attr("dy", "-11")
      .style("font-size", "8px")
      .text("OVERALL");

  var overall = svg.append("g")
      .attr("class", "g-overall g-overall-all")
      .attr("transform", "translate(" + x(overallRate) + "," + y0(nameAll) + ")");

  overall.append("line")
      .attr("y1", -100)
      .attr("y2", +127);

  var overallText = overall.append("text")
      .attr("y", -106)
      .style("font-weight", "bold");

  overallText.append("tspan")
      .attr("x", 0)
      .style("font-size", "13px")
      .text(formatTenthPercent(overallRate));

  overallText.append("tspan")
      .attr("x", 0)
      .attr("dy", "-14")
      .style("font-size", "8px")
      .text("OVERALL");

  var currentView = "overall";

  d3.selectAll(".g-content button[data-view]")
      .datum(function(d) { return this.getAttribute("data-view"); })
      .on("click", transitionView);

  var searchInput = d3.select(".g-search input")
      .on("keyup", keyuped);

  var searchClear = d3.select(".g-search .g-search-clear")
      .on("click", function() {
        searchInput.property("value", "").node().blur();
        search();
      });

  var tip = d3.select(".g-tip");

  var tipMetric = tip.selectAll(".g-tip-metric")
      .datum(function() { return this.getAttribute("data-name"); });

  d3.selectAll(".g-annotations b,.g-sector-notes b")
      .datum(function() { return new RegExp("\\b" + d3.requote(this.textContent), "i"); })
      .on("mouseover", mouseoverAnnotation)
      .on("mouseout", mouseout);

  function keyuped() {
    if (d3.event.keyCode === 27) {
      this.value = "";
      this.blur();
    }
    search(this.value.trim());
  }

  function search(value) {
    if (value) {
      var re = new RegExp("\\b" + d3.requote(value), "i");
      svg.classed("g-searching", true);
      sectorCompany.classed("g-match", function(d) { return re.test(d.name) || re.test(d.sector) || (d.symbol && re.test(d.symbol)) || (d.alias && re.test(d.alias)); });
      var matches = d3.selectAll(".g-match");
      if (matches[0].length === 1) mouseover(matches.datum());
      else mouseout();
      searchClear.style("display", null);
    } else {
      mouseout();
      svg.classed("g-searching", false);
      sectorCompany.classed("g-match", false);
      searchClear.style("display", "none");
    }
  }

  function transitionView(view) {
    if (currentView === view) view = view === "overall" ? "sector" : "overall";
    d3.selectAll(".g-buttons button[data-view]").classed("g-active", function(v) { return v === view; })
    switch (currentView = view) {
      case "overall": return void transitionOverall();
      case "sector": return void transitionSector();
    }
  }

  function transitionOverall() {
    gVoronoi.style("display", "none");

    var transition = d3.transition()
        .duration(750);

    transition.select("svg")
        .delay(720)
        .attr("height", 420 + margin.top + margin.bottom)
        .each("end", function() {
          gVoronoi.call(updateVoronoi,
            function(d) { return d.cx; },
            function(d) { return d.cy + y0(nameAll); },
            420);
        });

    transition.select(".g-annotations-overall")
        .each("start", function() { this.style.display = "block"; })
        .style("opacity", 1);

    transition.select(".g-sector-notes")
        .style("opacity", 0)
        .each("end", function() { this.style.display = "none"; });

    transition.selectAll(".g-y-axis-sector")
        .style("stroke-opacity", 0)
        .style("fill-opacity", 0);

    transition.selectAll(".g-y-axis-overall")
        .style("stroke-opacity", 1)
        .style("fill-opacity", 1);

    var transitionOverall = transition.select(".g-overall-all")
        .delay(x(overallRate))
        .style("stroke-opacity", 1)
        .style("fill-opacity", 1);

    transitionOverall.select("line")
        .attr("y2", +127);

    transitionOverall.select("text")
        .attr("y", -106);

    var transitionSectorOverall = transition.selectAll(".g-sector .g-overall")
        .delay(function(d) { return x(d.rate); })
        .attr("transform", function(d) { return "translate(" + x(d.rate) + "," + (y0(nameAll) - y(d.key)) + ")"; })
        .style("stroke-opacity", 0)
        .style("fill-opacity", 0);

    transitionSectorOverall.select("line")
        .attr("y1", -100)
        .attr("y2", +127);

    transitionSectorOverall.select("text")
        .attr("y", -106);

    transition.selectAll(".g-sector-company circle")
        .delay(function(d) { return d.cx; })
        .attr("cx", function(d) { return d.cx; })
        .attr("cy", function(d) { return d.cy - y(d.sector) + y0(nameAll); });
  }

  function transitionSector() {
    gVoronoi.style("display", "none");

    var transition = d3.transition()
        .duration(750);

    transition.select("svg")
        .attr("height", height + margin.top + margin.bottom)
      .transition()
        .delay(720)
        .each("end", function() {
          gVoronoi.call(updateVoronoi,
            function(d) { return d.x; },
            function(d) { return y(d.sector) + d.y; },
            height);
        });

    transition.select(".g-annotations-overall")
        .style("opacity", 0)
        .each("end", function() { this.style.display = "none"; });

    transition.select(".g-sector-notes")
        .delay(250)
        .each("start", function() { this.style.display = "block"; })
        .style("opacity", 1);

    transition.selectAll(".g-y-axis-sector,.g-sector-note")
        .delay(250)
        .style("stroke-opacity", 1)
        .style("fill-opacity", 1);

    transition.selectAll(".g-y-axis-overall")
        .style("stroke-opacity", 0)
        .style("fill-opacity", 0);

    var transitionOverall = transition.select(".g-overall-all")
        .delay(x(overallRate))
        .style("stroke-opacity", 0)
        .style("fill-opacity", 0);

    transitionOverall.select("line")
        .attr("y2", height - y0(nameAll));

    var transitionSectorOverall = transition.selectAll(".g-sector .g-overall")
        .delay(function(d) { return x(d.rate); })
        .attr("transform", function(d) { return "translate(" + x(d.rate) + ",0)"; })
        .style("stroke-opacity", 1)
        .style("fill-opacity", 1);

    transitionSectorOverall.select("line")
        .attr("y1", -25)
        .attr("y2", +25);

    transitionSectorOverall.select("text")
        .attr("y", -31);

    transition.selectAll(".g-sector-company circle")
        .delay(function(d) { return d.x; })
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }

  function updateVoronoi(gVoronoi, x, y, height) {
    companyClip
        .attr("cx", x)
        .attr("cy", y);

    gVoronoi
        .style("display", null)
      .selectAll("path")
        .data(d3.geom.voronoi().x(x).y(y)(companies))
        .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
        .datum(function(d) { return d.point; });
  }

  function mouseoverAnnotation(re) {
    var matches = sectorCompany.filter(function(d) { return re.test(d.name) || re.test(d.alias); }).classed("g-active", true);
    if (d3.sum(matches, function(d) { return d.length; }) === 1) mouseover(matches.datum());
    else tip.style("display", "none");
  }

  function mouseover(d) {
    sectorCompany.filter(function(c) { return c === d; }).classed("g-active", true);

    var dx, dy;
    if (currentView === "overall") dx = d.cx, dy = d.cy + y0(nameAll);
    else dx = d.x, dy = d.y + y(d.sector);
    dy -= 19, dx += 50; // margin fudge factors

    tip.style("display", null)
        .style("top", (dy - r(d.capitalization)) + "px")
        .style("left", dx + "px");

    tip.select(".g-tip-title")
        .text(d.alias || d.name);

    tipMetric.select(".g-tip-metric-value").text(function(name) {
      switch (name) {
        case "rate": return isNaN(d.rate) ? "N.A." : formatPercent(d.rate);
        case "taxes": return formatDollars(d.taxes);
        case "earnings": return formatDollars(d.earnings);
      }
    });
  }

  function mouseout() {
    tip.style("display", "none");
    sectorCompany.filter(".g-active").classed("g-active", false);
  }
});

function renderChartKey(g) {
  var formatPercent = d3.format(".0%"),
      formatNumber = d3.format(".0f");

  // A position encoding for the key only.
  var x = d3.scale.linear()
      .domain([0, .6])
      .range([0, 240]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickSize(13)
      .tickValues(z.domain())
      .tickFormat(function(d) { return d === .5 ? formatPercent(d) : formatNumber(100 * d); });

  g.append("text")
      .attr("x", -25)
      .style("text-anchor", "end")
      .style("font", "bold 9px sans-serif")
      .text("CHART KEY");

  var gColor = g.append("g")
      .attr("class", "g-key-color")
      .attr("transform", "translate(140,-7)");

  gColor.selectAll("rect")
      .data(z.range().map(function(d, i) {
        return {
          x0: i ? x(z.domain()[i - 1]) : x.range()[0],
          x1: i < 4 ? x(z.domain()[i]) : x.range()[1],
          z: d
        };
      }))
    .enter().append("rect")
      .attr("height", 8)
      .attr("x", function(d) { return d.x0; })
      .attr("width", function(d) { return d.x1 - d.x0; })
      .style("fill", function(d) { return d.z; });

  gColor.call(xAxis);

  var gColorText = g.append("text")
      .attr("x", 140 - 6)
      .style("text-anchor", "end");

  gColorText.append("tspan")
      .style("font-weight", "bold")
      .text("Color");

  gColorText.append("tspan")
      .style("fill", "#777")
      .text(" shows effective rate");

  var gSize = g.append("g")
      .attr("class", "g-key-size")
      .attr("transform", "translate(580,-7)");

  var gSizeInstance = gSize.selectAll("g")
      .data([1e9, 10e9, 50e9, 100e9])
    .enter().append("g")
      .attr("class", "g-sector");

  gSizeInstance.append("circle")
      .attr("r", r);

  gSizeInstance.append("text")
      .attr("x", function(d) { return r(d) + 4; })
      .attr("dy", ".35em")
      .text(function(d) { return "$" + Math.round(d / 1e9) + "B"; });

  var gSizeX = 0;

  gSizeInstance.attr("transform", function() {
    var t = "translate(" + gSizeX + ",3)";
    gSizeX += this.getBBox().width + 15;
    return t;
  });

  var gSizeText = g.append("text")
      .attr("x", 580 - 10)
      .style("text-anchor", "end");

  gSizeText.append("tspan")
      .style("font-weight", "bold")
      .text("Size");

  gSizeText.append("tspan")
      .style("fill", "#777")
      .text(" shows market capitalization");
}

function yAxisWrap(g) {
  g.selectAll(".tick text")
    .filter(function(d) { return /[ ]/.test(d) && this.getComputedTextLength() > margin.left - tickExtension - 10; })
      .attr("dy", null)
      .each(function(d) {
        d3.select(this).text(null).selectAll("tspan")
            .data(d.split(" "))
          .enter().append("tspan")
            .attr("x", this.getAttribute("x"))
            .attr("dy", function(d, i) { return (i * 1.35 - .35) + "em"; })
            .text(function(d) { return d; });
      });
}

function taxes(d) {
  return d.taxes;
}

function earnings(d) {
  return d.earnings;
}

function rate(taxes, earnings) {
  return earnings <= 0 ? NaN : taxes / earnings;
}

function type(d) {
  d.x = +d.x;
  d.y = +d.y;
  d.cx = +d.cx;
  d.cy = +d.cy;
  d.taxes *= 1e6;
  d.earnings *= 1e6;
  d.capitalization *= 1e6;
  return d;
}

var sectorNoteByName = {
  "Utilities": "Utilities benefited from the 2009 stimulus bill, which included tax breaks for companies that make capital-intensive investments, like power plants.",
  "Information technology": "Technology companies can often move operations overseas for accounting purposes. And younger firms tend to have recent losses, holding down the sector&rsquo;s overall rate.",
  "Industrials": "As with the corporate sector, large industrial companies &mdash; like <b>Boeing</b>, <b>Caterpillar</b>, <b>General Electric</b> and <b>Honeywell</b> &mdash; pay lower taxes on average than small companies.",
  "Telecom": "<b>Verizon</b> had a much lower effective tax rate than its rival <b>AT&T</b>, despite having similar profits over the six-year period.",
  "Health care": "Within health care, managed care companies pay relatively higher tax rates, and makers of equipment, supplies and technology pay relatively lower rates.",
  "Pharma": "Tax breaks for research and the ability to locate operations in low-tax countries have helped pharmaceutical and biotech companies to pay low taxes.",
  "Consumer products": "Movie studios and packaged-food company pay more than 30 percent, on average. Soft-drink companies pay only 19 percent, and restaurant companies, 25 percent.",
  "Materials": "The materials industry (chemicals, minerals, etc.) exemplifies a point often made by tax experts: within industries, tax rates vary greatly, in ways that often evade simple explanation.",
  "Financials": "As financial firms have recovered from the crisis, some have paid relatively high tax rates.",
  "Retailers": "Brick-and-mortar retailers, like <b>Bed Bath & Beyond</b> and <b>Home Depot</b>, tend to pay high tax rates. Online retailers, like <b>Amazon</b>, face low rates.",
  "Energy": "Large oil companies typically pay high rates, but some economists argue that the high rates do not cover the pollution costs imposed on society.",
  "Insurance": "Many insurers pay lower-than-average rates. But <b>A.I.G.</b> &mdash; which had an $83 billion loss while paying $8 billion in taxes &mdash; drives the sector&rsquo;s average up."
};

})()

（函数（）{
var margin={顶部：20，右侧：95，底部：10，左侧：125}，
宽度=970-margin.left-margin.right，
高度，
ticketextension=20；//将网格线延伸到比例范围之外
var formatPercent=d3.format（“.0%”），
formatTenthPercent=d3.format（“.1%”），
formatNumber=d3.format（“，.3s”），
FormatUnits=函数（d）{return（d<0？-“：”）+“$”+formatNumber（Math.abs（d））.replace（/G$/，“B”）；}；
var nameAll=“S.\x26P.\xa0500家公司”；
var x=d3.scale.linear（）
.domain（[0,6]）
.rangeRound（[0，宽度-60]）
.夹具（正确）
.nice（）；
变量y=d3.scale.ordinal（）；
变量y0=d3.scale.ordinal（）
.domain（[nameAll]）
.范围（[150]）；
var r=d3.scale.sqrt（）
.domain（[0，1e9]）
.范围（[0,1]）；
var z=d3.scale.threshold（）
.domain（[.1、.2、.3、.4、.5]）
.范围（[“#b35806”、“#f1a340”、“#fee0b6”、“#d8daeb”、“#998ec3”、“#542788”]。反向（）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“顶部”）
.滴答声（5）
.格式（格式百分比）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.tickSize（-width+60-ticketextension*2,0）
.1（6）；
var quadtree=d3.geom.quadtree（）
.x（函数（d）{返回d.x；}）
.y（函数（d）{返回d.y；}）；
var svg=d3。选择（“.g-graphic”）。追加（“svg”）
.attr（“高度”，420+margin.top+margin.bottom）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
d3.选择（“.g-graphic”）。追加（“svg”）
.style（“页边空白顶部”、“20px”）
.attr（“高度”，80）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.呼叫（renderChartKey）；
var gx=svg.append（“g”）
.attr（“类别”、“g-x g轴”）
.呼叫（xAxis）；
var tickLast=gx.selectAll（.g-x.tick:type的最后一个）；
勾选最后一个。选择（“文本”）
.text（函数（）{return“\u2265”+this.textContent；}）；
tickLast.select（函数（）{返回this.parentNode.appendChild（this.cloneNode（true））；}）
.attr（“变换”、“平移”（+width+），0）
.选择（“文本”）
.文本（“不适用”）；
var titleX=gx.append（“文本”）
.attr（“类别”、“g-title”）
.attr（“y”，-9）
.样式（“文本锚定”、“结束”）；
标题附加（“tspan”）
.attr（“x”，-20）
.style（“字体大小”、“粗体”）
.文本（“有效税率”）；
标题附加（“tspan”）
.attr（“x”，-20）
.attr（“dy”、“1em”）
.文本（“2007-12”）；
d3.tsv（”http://graphics8.nytimes.com/newsgraphics/2013/05/13/corporate-taxes/ee84b0191a75f5c652087293ab0efd4710e21f94/companies.tsv，类型，功能（错误，公司）{
var扇区=d3.nest（）
.key（函数（d）{返回d.sector；}）
.参赛作品（公司）；
//计算所有数据的总速率。
var总体利率=利率（d3.总和（公司，税收），d3.总和（公司，收益））；
//按部门计算总费率。
扇区。forEach（功能（d）{
d、 利率=利率（d3.总和（d.价值，税收），d3.总和（d.价值，收入））；
});
//按总速率升序对扇区进行排序。
扇区.排序（函数（a，b）{
返回a.rate-b.rate；
});
//计算每个公司的费率。
公司。forEach（职能（d）{
d、 比率=比率（d.税收，d.收入）；
});
高度=120*扇区长度；
Y
.domain（sectors.map（函数（d）{return d.key；}））
.范围点（[10，高度]，1）；
svg.append（“g”）
.attr（“类别”，“g-y g轴g-y轴扇区”）
.attr（“转换”、“转换”（“+ticketextension+”，0）”）
.呼叫（yAxis.刻度（y））
.呼叫（yAxisWrap）
.style（“笔划不透明度”，0）
.style（“填充不透明度”，0）
.selectAll（“.tick text，.tick tspan”）
.attr（“x”，-95）
.style（“文本锚定”、“开始”）；
svg.append（“g”）
.attr（“类别”，“g-y g轴g-y轴整体”）
.attr（“转换”、“转换”（“+ticketextension+”，0）”）
.呼叫（yAxis.刻度（y0））
.呼叫（yAxisWrap）；
var companyClip=svg.append（“defs”）.selectAll（“clipPath”）
.数据（公司）
.enter（）.append（“clipPath”）
.attr（“id”，函数（d，i）{返回“g-clip-company-”+i；}）
.附加（“圆圈”）
.attr（“cx”，函数（d）{return d.cx；}）
.attr（“cy”，函数（d）{返回d.cy-y0（nameAll）；}）
.attr（“r”，函数（d）{返回r（d.capitalized）+20；}）；
var gVoronoi=svg.append（“g”）
.attr（“类别”、“g-voronoi”）
gVoronoi.selectAll（“路径”）
.数据（公司）
.enter（）.append（“路径”）
.attr（“剪辑路径”，函数（d，i）{return“url（#g-clip-company-“+i+”）；}）
.on（“鼠标悬停”，鼠标悬停）
.on（“mouseout”，mouseout）；
gVoronoi.call（更新），
函数（d）{return d.cx；}，
函数（d）{返回d.cy+y0（nameAll）；}，
420);
var sector=svg.append（“g”）
.attr（“类别”、“g部门”）
.全选（“g”）
.数据（部门）
.enter（）.append（“g”）
.attr（“转换”，函数（d）{return“translate（0，+y（d.key）+”）；}；
var sectorNote=d3.选择（“.g-sector-notes”）
.style（“不透明度”，0）
.style（“显示”、“无”）
.selectAll（“div”）
.数据（部门）
.enter（）.append（“div”）
.attr（“类别”、“g部门注释”）
.style（“top”，函数（d）{返回y（d.key）+“px”；}）
.html（函数（d）{返回sectorNoteByName[d.key]；}）；
var sectorCompany=sector.append（“g”）
.