javascript - 如何在dimple js中创建气泡饼图-6ren

javascript - 如何在dimple js中创建气泡饼图

转载作者：行者123 更新时间：2023-12-03 05:56:24

我是酒窝新手，在创建气泡饼图时遇到问题。我希望每个气泡也是一个显示区域百分比的饼图。我尝试使用 myChart.addSeries(["North America", "Latin America"], dimple.plot.pie); 插入饼图但没有成功。有什么建议么？谢谢!

function draw(data) {
  /*
  D3.js setup code
  */
  "use strict";
  var margin = 75,
      width = 1400 - margin,
      height = 600 - margin;

  var svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin)
  .attr("height", height + margin)
  .append('g')
  .attr('class','chart');         
  /*
          Dimple.js Chart construction code
        */
  var myChart = new dimple.chart(svg, data);
  myChart.addCategoryAxis("x", "Target Date");
  myChart.addCategoryAxis("y", "Target Reduction");
  myChart.addMeasureAxis("z", "Number of Cities");

  myChart.addSeries(
    ["Cities",
     "North America",
     "Latin America"],
    dimple.plot.bubble);

  //myChart.addSeries(["North America", "Latin America"], dimple.plot.pie);

  myChart.addLegend(180, 10, 360, 20, "right");
  myChart.draw();
  /*
  Add horizontal line at 50%
  */
  svg.append("line")
    .attr("x1", margin+65)
    .attr("x2", 1250)
    .attr("y1", 325)
    .attr("y2", 325)
    .style("stroke", "red")
    .style("stroke-dasharray", "3");
  /*
          Add horizontal line at 85%
        */
  svg.append("line")
    .attr("x1", margin+65)
    .attr("x2", 1250)
    .attr("y1", 180)
    .attr("y2", 180)
    .style("stroke", "red")
    .style("stroke-dasharray", "3");
  /*
            Add chrt title
          */
  svg.append("text")
    .attr("x", myChart._xPixels() + myChart._widthPixels() / 2)
    .attr("y", myChart._yPixels() - 20)
    .style("text-anchor", "middle")
    .style("font-family", "sans-serif")
    .style("font-weight", "bold")
    .style("font-size", "20px")
    .text("Emissions Targets set by CDP Cities");


};

d3.csv("data.csv", draw);