Графики D3 - добавление линейного графика D3 к эллипсу SVG - PullRequest
Новая
       38

Графики D3 - добавление линейного графика D3 к эллипсу SVG

0 голосов
/ 20 сентября 2018

Мне нужно добавить линейный график D3 в svg Ellipse, но пока безуспешно.У меня в основном есть кольцевая диаграмма, и я добавляю эллипс в середину заряда пончика, а затем я хочу добавить линейную диаграмму 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)
}

Каждый знает, что такоеправильно ли прикрепить график к эллипсу?

...