Question

我需要向Ellipse svg添加D3折线图，但到目前为止没有成功。我基本上有一个甜甜圈图，我在甜甜圈装料的中间添加了一个椭圆，然后我想在椭圆内添加一个d3折线图。我的部分代码是：

创建椭圆并附加到甜甜圈图的中间：

const ellipse = g.append('ellipse')
  .attr('id', 'ellipse')
  .attr('cx', '0')
  .attr('cy', '25')
  .attr('rx', '90')
  .attr('ry', '75')
  .style('fill', 'transparent')
  .style('stroke', 'black')
  .style('stroke-width', '1')

创建折线图：

renderTotal = (data, colors, ellipse) => {
  const totalData = data.historical

  var chart = d3.select('#ellipse');
  // Here i was aiming to append the chart to the ellipse created in 
  // the previous step with id "ellipse"
  var margin = {
    top: 0,
    right: 0,
    bottom: 0,
   left: 0,
  };
  var width = 100;
  var height = 100;
  var g = chart.append('g').attr('transform', 'translate(' + margin.left + ','+ margin.top +')');

  var x = d3.scaleBand()
    .domain(totalData.map(function(d) { return d.date }))
    .rangeRound([0, width]);

  var y = d3.scaleLinear()
    .domain(d3.extent(totalData, function(d) { return d.value }))
    .rangeRound([height, 0]);

  var line = d3.line()
    .curve(d3.curveMonotoneX)
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

  g.append('path')
    .datum(totalData)
   .attr('class', 'line')
   .attr('d', line);
  var area = d3.area()
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.value); });
  g.append('path')
    .datum(totalData)
    .attr('d', area)
}

有人知道将图形附加到椭圆上的正确方法是什么吗？

D3图-将D3折线图添加到SVG椭圆

0 个答案: