Подсчет отдельных колец в кольцевой диаграмме

Question

Я пытаюсь нарисовать круговую диаграмму или кольцевую диаграмму. Есть несколько вариантов, которые, как представляется, с d3js. Наиболее популярным, по-видимому, является использование макета пирога, чтобы сделать несколько donut rings. Другой вариант - использовать круговую диаграмму тепла like this one -

Однако оба эти варианта используют сегменты заполнения в качестве способа их отображения. Однако я хотел использовать строки для отображения событий с течением времени. С каждой линией, происходящей внутри определенного кольца.

Чтобы получить этот эффект, я адаптировал радиальный погодный график - http://bl.ocks.org/susielu/b6bdb82045c2aa8225f5

Это моя попытка до сих пор: http://blockbuilder.org/jalapic/12a3a23651f40283d489

Он не имеет маркировок, но каждое кольцо (12 всего) представляет собой индивидуальный субъект. Каждый сегмент представляет собой образец времени (здесь говорят месяцы, но может быть что угодно). Линии рисуются внутри каждого кольца, к которому они принадлежат. Я сохранил те же имена переменных, что и пример погоды, чтобы сопоставлять мои удаленные коды и исходный код автора.

Это то, что он выглядит следующим образом:

Мой вопрос заключается в том, как это могло бы быть возможно наведении курсора каждое кольцо, чтобы сделать содержимое только то, что кольца (т.е. линии) остаются видимыми, то есть, чтобы скрыть другое кольца - это облегчит просмотр диаграммы.

Вот код для того, как кольца состоят из:

var mycircles = [110,100, 90, 80, 70, 60,50,40,30,20,10,0] 

    origin.selectAll('circle.axis-green') 
    .data(mycircles)  //original circles 
    .enter() 
    .append('circle') 
    .attr('r', function(d) { return rScale(d)}) 
    .style("fill", "#fff8ee") 
    .style("opacity", .05) 
    .attr('class', 'axis record') 
    .on("mouseover", function(d) {d3.select(this).style("fill", "red");})  
    .on("mouseout", function(d) {d3.select(this).style("fill", "#fff8ee"); 
}); 

Как можно видеть кольца фактически перекрывающиеся круги. Есть ли способ достичь того, что я пытаюсь сделать, используя подход, который я принимаю, или мне нужно вернуться к работе над такими сегментами, как в макетах heatchart или pie?

Answer 1

Рассматривая ваши данные и код, одним из методов было бы присвоение класса каждой строке, представляющей его положение кольца. Затем вы можете использовать события mouseover и mouseout для переключения непрозрачности этих строк.

Во-первых, создать пару вспомогательных функций:

// which ring is currently highlighted 
var curRing = null; 
// show all rings 
function unShowRing(){ 
    d3.selectAll(".record") 
    .style("opacity", 1); 
    curRing = null; 
} 
// only show current ring 
function showRing(ringId){ 
    // all lines that are not in my ring, hide them 
    d3.selectAll(".record:not(.ring" + ringId + ")") 
     .style("opacity", 0); 
    curRing = ringId; 
} 

Настройка линии немного разные:

... 
.enter().append('line') 
    // assign a unique class to each ring's lines 
    .attr('class', function(d) { 
     return cl + " ring" + d.recLow/10; 
    }) 
    // on mouseover only show my ring 
    .on("mouseover", function(d){ 
     var ringId = d.recLow/10; 
     showRing(ringId); 
    }) 
    // on mouseout show all rings 
    .on("mouseout", function(d){ 
     unShowRing(); 
    }) 
    // this will prevent lines transitioning in from being shown 
    .style('opacity', function(d){ 
     if (!curRing){ 
     return 1; 
     } else { 
     var ringId = d.recLow/10; 
     return ringId === curRing ? 1 : 0; 
     } 
    }) 

Наконец, вам нужно обрабатывать кольцо «круг», а также наведение в случае, если пользователь Мышка более линий или колец:

origin.selectAll('circle.axis-green') 
    .data(mycircles) //original circles 
    ... 
    .on("mouseover", function(d) { 
     d3.select(this).style("fill", "red"); 
     var ringId = d/10; 
     showRing(ringId); 
    }) 
    .on("mouseout", function(d) { 
     d3.select(this).style("fill", "#fff8ee"); 
     unShowRing(); 
    }); 

Вот whole thing working.