使用d3.js的具有扩展边的半圆条形图

我正在尝试绘制一个d3图表与扩展的边缘一样，在图像中，“this is the link to the design“
我能够以同样的方式实现半圆形，但我对如何扩展边缘有点困惑，这是我目前所做的代码，link to codepen
JS：

var width = 300,
  height = 300;
var twoPi = Math.PI; // Full circle
var formatPercent = d3.format(".0%");
const color = [
  "#F9C969",
  "#FB8798",
  "#51D6D8",
  "#B192FD",
  "#509FFD",
  "#5B65B7"
];
console.log(d3.schemeCategory10);
var data = [
  { count: 1000 },
  { count: 800 },
  { count: 800 },
  { count: 700 },
  { count: 900 },
  { count: 600 }
];

var percent = d3.max(data, function (d) {
  return +d.count / 10;
});

var max = d3.max(data, function (d) {
  return +d.count;
});
var baseRad = 0.25,
  cgap = 12,
  maxVal = max + percent;

var cx1 = width / 2.5;
var cy1 = height / 2.5;

var cl = "c0";

var ind = 0;

var rad;
var rad2;

rad = baseRad;
rad2 = baseRad;

var svg = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 10 + "," + height / 10 + ")");

var svg2 = d3
  .select("svg")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 10 + "," + height / 10 + ")");

svg2
  .selectAll("path")
  .data(data)
  .enter()
  .append("path")
  // .each(drawBackArc)
  .each(drawArc)
  .style("fill", function (d, i) {
    return color[i % 6];
  });

svg
  .selectAll("path")
  .data(data)
  .enter()
  .append("path")
  // .each(drawBackArc)

  .each(drawBackArc)
  .style("fill", "#F1F1F1");
// .attr("ax", "-100px")
// .attr("ay", "-100px");

function drawArc(d, i) {
  console.log(d, i);
  var ratio = d.count / maxVal;
  var arc = d3.svg
    .arc()
    .startAngle(3.14159)
    // .(true)
    .endAngle(6.28319 * ratio)
    .innerRadius(72 + cgap * rad)
    .outerRadius(80 + cgap * rad);

  d3.select(this)
    .attr("transform", "translate(" + cx1 + "," + cy1 + ")")
    .attr("d", arc)
    .style("fill", function (d, i) {
      return color[i % 6];
    });
  rad++;
}

function drawBackArc(d, i) {
  var ratio = d.count / maxVal;
  var arc = d3.svg
    .arc()
    .startAngle(twoPi)
    // .(true)
    .endAngle(twoPi * 2)
    .innerRadius(72 + cgap * rad2)
    .outerRadius(80 + cgap * rad2);

  d3.select(this)
    .attr("transform", "translate(" + cx1 + "," + cy1 + ")")
    .attr("d", arc)
    .style("fill", "#F1F1F1");
  rad2++;
}

于飞：

<script src="https://d3js.org/d3.v3.min.js"></script>
<body></body>

CSS：

body{background-color: #fff;margin: 1.5rem 6rem}

我看过教程解释如何在d3.js中绘制不同的形状，我可以想到在一端绘制一个矩形形状来实现设计，但即使这样，问题是如何在两个单独的形状中获得数据，在d3中是否可能？如果不可能，请建议任何其他可能的方法，如果有。
谢谢

由于您知道中心点，因此添加了2个平移（30，30）和（120，120），因此中心点为150，150
现在你可以得到所有弧的端点，x值与中心点相同，y值在调整半径后。下面添加的更改到您的代码中请调整您的图形的长度和宽度的线。也添加线的长度到弧的长度，以获得正确的百分比，并与填充线重叠，如下图所示，如果百分比增加了弧的长度，所需的长度

var centerPoint = [150, 150] //added for translation
var radius = 72 + cgap * rad2;
gLines.append("line")
  .attr("x1", centerPoint[0])
  .attr("x2", centerPoint[0] + 140) // Add length of the bar
  .attr("y1", centerPoint[0] - radius + 16)
  .attr("y2", centerPoint[0] - radius + 16) // This will adjust line width and inner and outer radius
  .style("stroke", "#F2F2F2")
  .style("stroke-width", "8");

第一个

使用d3.js的具有扩展边的半圆条形图

1条答案

相关问题

热门标签

最新问答