Как перенести только свойство радиуса дуги d3.js

Я хотел бы добавить переход ко всем элементам пути в SVG, которые расширяют только внешний. Я пытаюсь создать растущий эффект для всех этих мини-дуг, которые я делаю.Как перенести только свойство радиуса дуги d3.js

Как только все дуги были сделаны, я хотел бы ТОЛЬКО расширять внешнюю границу для всех из них. Поэтому, например, я хотел бы, чтобы весь внешний радиус дуги расширялся на 5, но я хотел бы, чтобы они сохранили все другие свойства. Я попытался изменить свойство outerRadius, а затем снова называть дугу, но это сбрасывает все остальные свойства, такие как начальный и конечный угол. Вот мой codepen: http://codepen.io/nsohail92/pen/obNRvv

var width = 1200; 
var height = 1200; 
var innerRadius = height/2.5; 
var outerRadius = height/2; 
var count = 0; 
var startAngle = 0; 
var increment = (360/16)/100; //.025 
var endAngle; 

var drawArc = d3.svg.arc(); 
var vis = d3.select("body").append("svg"); 
var svg = vis.attr("width", width).attr("height", height); 

function createArc() { 

    endAngle = startAngle + increment; 

    drawArc 
    .innerRadius(innerRadius) 
    .outerRadius(outerRadius) 
    .startAngle(startAngle) 
    .endAngle(endAngle); 

    svg.append("path") 
    .attr("d", drawArc) 
    .attr("fill", "#81ecb5") 
    .attr("transform", "translate(600,600)"); 


    if(endAngle < 5) { 
     count = count + 1; 
     startAngle = endAngle + .02;  
    } 

    else { 
    var pathArray = svg.selectAll("path"); 
    console.log(pathArray); 

    drawArc.outerRadius(550); 
    svg.select("path#path_0").transition().duration(1500).attr("d", drawArc); 
    return; 
    } 

    createArc(); 
} 

createArc();

источник

2015-12-06 nehas

так у ¨R говорят, что на дро полном увеличении дэ внешнего радиус круговой диаграммы? – Cyril

Есть много примеров того, как это сделать. Как эти люди не работают на вас? –

@LarsKotthoff есть примеры того, как переопределить объект дуги с новым радиусом, но я не хочу этого делать, поскольку у меня есть разные значения угла, заданные каждой дуге в цикле for. Есть пример arcTween, но я понятия не имею, как его использовать. – nehas

Комментарии инлайн

var drawArcs = [];//stores all the arcs 
var paths = [];//stores all the paths. 

function createArc() { 
    var drawArc = d3.svg.arc();//make an arc object every time. 
    drawArcs.push(drawArc);//push the arc object 
    endAngle = startAngle + increment; 

     drawArc 
     .innerRadius(innerRadius) 
     .outerRadius(600) 
     .startAngle(startAngle) 
     .endAngle(endAngle); 
    //make the path 
     var path = svg.append("path") 
     .attr("id", "path_" + count) 
     .attr("d", drawArc) 
     .attr("fill", "#81ecb5") 
     .attr("transform", "translate(600,600)"); 
     paths.push(path); 

     if (endAngle < 5) { 
     count = count + 1; 
     startAngle = endAngle + .02; 
     } else { 
     //each drawArc increase outer radius 
     drawArcs.forEach(function(d, i) { 
      d.outerRadius(750); 
      //to the path put the transition for new radius 
      paths[i].transition().duration(1500).attr("d", d); 
     }); 
     return; 
     } 

     createArc(); 

    }

Рабочего код here

Надеется, что это помогает!

источник

2015-12-06 04:50:48 Cyril

Спасибо, но в моем вопросе я спросил, как это сделать, ТОЛЬКО изменив свойство outerRadius. Я не хочу переопределять весь объект дуги, потому что я даю отличные начальные и конечные значения для каждой арки. – nehas

теперь в разделе редактирования. Я меняю внешний арка дуги только ... обновленный, а также – Cyril

Это не сработает из-за уникальных значений угла начала и конца, которые я дал всем дугам. Я в конечном итоге получаю эту ошибку: Uncaught TypeError: Невозможно прочитать свойство 'startAngle' undefined Чтобы помочь вам привести пример нескольких арков с разными значениями начала и конца угла и функцией, которая ТОЛЬКО изменяет значение внешнего Radius арки? – nehas

Мы можем дать идентификатор для каждого пути, и мы можем назвать отдельный переход для каждого одного

var svg = d3.select("body") 
.append("svg") 
.attr("width", 400) 
.attr("height", 400) 
.append("g") 
.attr("transform", "translate(100,100)"); 
var arc = d3.svg.arc() 
.innerRadius(20) 
.outerRadius(20) 
.startAngle(0) 
.endAngle(Math.PI); 
svg.append("path") 
.attr("id", "arc1") 
.attr("d", arc); 
arc.outerRadius(70); 
d3.select("#arc1").transition() 
.duration(1000) 
.attr("d", arc)

Code Fiddle

источник

2016-06-03 08:00:20 user3501613

Как перенести только свойство радиуса дуги d3.js

ответ

Смежные вопросы