Используйте CSS для перемещения диаграмм близко друг к другу

Question

У меня есть две диаграммы. Один больше, чем другой. Большая часть состоит из двух меток, называемых a и b. Маленький состоит из ярлыков c и d. Код для обеих диаграмм аналогичен приведенному ниже.

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['Rra', 3880], 
      ['b', 50], 
     ], 
     type : 'donut' 

    }, 


}); 


var chart = c3.generat 
     size: { 
     height: 200, 
     width: 450 
    }, 
    data: { 
     columns: [ 
      ['c', 50], 
      ['d', 50], 
     ], 

    }, 


}); 

Мне было интересно, можно ли переместить небольшую диаграмму между пустым пространством на большой диаграмме. Таким образом, они выглядят как двухслойные диаграммы. Я проверил элемент на маленькой диаграмме и попытался использовать css для настройки transform="translate(225,83)" на разные значения. Однако я заметил, что небольшая диаграмма приблизилась к большей части диаграммы, и она исчезла.

Я не являюсь экспертом в css или графических библиотеках и хотел бы получить информацию о том, как этого достичь. Вот мой FIDDLE

Answer 1

Хотя я согласен с ответом YourConscious (используя Д3 плагин для создания того, что вы хотите, вместо того, чтобы использовать Hacky CSS), вот метод CSS я придумал с:

.chart_container{ 
    position:relative; 
} 

#chart1{ 
    position:absolute !important; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
} 

вы можете увидеть его в действии в этом Fiddle

магия оборачивает обе диаграммы в контейнере DIV, установив его на position:relative;, так что вы можете поместить ваш меньший гр Отбросьте это. Затем дайте вашей маленькой диаграмме вышеуказанные стили всегда позиционировать ее в середине большего графика.

!important там, потому что кажется, что плагин положить встроенный стиль position:relative

Answer 2

Возможно, вы могли бы это сделать .. с position:absolute; и вложением. Но я бы не рекомендовал его и, скорее всего, не был бы таким стабильным (проблемы с z-index, мобильная связь, обновление позже и т. Д.).

Я думаю, что библиотека имеет прямую документацию и возможности для создания нескольких слоев/колец. Почему бы просто не сделать правильный путь?

Преувеличенный пример (5 слоев/кольца)

var dataset = { 
    apples: [53245, 28479, 19697, 24037, 40245], 
    oranges: [53245, 28479, 19697, 24037, 40245], 
    lemons: [53245, 28479, 19697, 24037, 40245], 
    pears: [53245, 28479, 19697, 24037, 40245], 
    pineapples: [53245, 28479, 19697, 24037, 40245], 
}; 

var width = 460, 
    height = 300, 
    cwidth = 25; 

var color = d3.scale.category20(); 

var pie = d3.layout.pie() 
    .sort(null); 

var arc = d3.svg.arc(); 

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

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g"); 
var path = gs.selectAll("path") 
    .data(function(d) { return pie(d); }) 
    .enter().append("path") 
    .attr("fill", function(d, i) { return color(i); }) 
    .attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); }); 

J Fiddler.

Кроме того, это может быть хорошим resource: