使用來自Force Layout的路徑作爲ClipPath

Question

我正在根據強制佈局中的某些點生成voronoi路徑。我想隨機分配10個類中的這些路徑中的1個，然後用clipPath包裝這些類中的一部分，然後將其應用於另一個元素。

是否有可能使用d3而不是附加元素來包裝svg標籤？

或者它甚至有可能在clipPath中使用由d3生成的多個路徑？

感謝你的幫助，

w = $(window).width(); 
    h = $(window).height(); 

    function ranNum(){ 
     return Math.floor((Math.random()*10)+1); 
    } 


    $('#grid').css('height', h); 

    var vertices = d3.range(50).map(function(d) { return {x: d.x, y: d.y}; }); 
    //console.log(vertices); 


    links = []; 
    voronoiVertices = []; 
    var force = d3.layout.force() 
     .nodes(vertices) 
     .size([w, h]) 
     .linkDistance(60) 
     .charge(-900) 
     .on("tick", tick) 
     .start(); 


    var svg = d3.select("body").append("svg:svg") 
     .attr("width", w) 
     .attr("height", h); 


    //path gradient 
    var defs = svg.append('defs') 
    var radialGradient = defs.append('radialGradient') 
     .attr('id', 'pathGrad') 
     .attr('cx', '50%') 
     .attr('cy', '50%') 
     .attr('r', '50%') 
     .attr('fx', '50%') 
     .attr('fy', '50%'); 

    var stop1 = radialGradient.append('stop') 
     .attr('offset', '.2') 
     .attr('stop-color', '#a8a8a8'); 

    var stop2 = radialGradient.append('stop') 
     .attr('offset', '1') 
     .attr('stop-color', '#0000000'); 

    //path dropShadow 
    var filterShadow = defs.append('filter') 
     .attr('id', 'pathShadow') 
     .attr('height', '130%'); 

    var gCir = svg.append('g') 
     .attr("class", "gCircle"); 

    var gPath = svg.append('g') 
     .attr("class", "gPath"); 

    var circle = svg.selectAll("circle"); 
    var path = gPath.selectAll("path") 
      .data(d3.geom.voronoi(vertices)) 
       .enter().append("path") 
      .attr("fill", "url(#pathGrad)"); 

      //wraps path with random class after generation 
    $('path').each(function(){$(this).attr('class', 'path-' + Math.floor((Math.random()*10)+1))}); 

    var clip = defs.append("svg:clipPath") 
     .attr("id", "clip") 
      .append("svg:rect") 
      .attr("id", "clip-rect") 
      .attr("x", "0") 
      .attr("y", "0") 
      .attr("width", '900px') 
      .attr("height", '900px'); 

    var gClip = svg.append("svg:g") 
     .attr('clip-path', 'url(#clip)'); 
/* 
    var clip = gClip.append("svg:image") 
     .attr("class", "circle") 
     .attr("xlink:href", "clip.jpg") 
     .attr("x", "0px") 
     .attr("y", "0px") 
     .attr("width", w) 
     .attr("height", h); 
*/ 
    var selectPath = d3.selectAll('.path-10');  
    console.log(selectPath);  


    function tick() { 
     voronoiVertices = vertices.map(function(t){return [t.x, t.y]}) 
     path = path.data(d3.geom.voronoi(voronoiVertices)) 
      path.enter().append("path") 
      .attr("d", function(t) { return "M" + t.join("L") + "Z"; }); 
     path.attr("fill", "url(#pathGrad)") 
      .attr("d", function(t) { return "M" + t.join("L") + "Z"; });   

     circle = circle.data(vertices) 
     circle.enter().append("circle") 
      .call(force.drag) 
      .attr("r", 0) 
      .attr('class', function(d) { return d.index; }) 
      .attr("cx", function(d) { return d.x; }) 
      .attr("cy", function(d) { return d.y; }) 
      .transition().duration(5000).attr("r", 5); 

      circle.attr("cx", function(d) { return d.x; }) 
      .attr("cy", function(d) { return d.y; }); 
    } 


}); 

Answer 1

有jQuery和D3的一個奇怪的混合在此。嘗試在D3中完成這些事情。例如，我寧願這樣做：

.attr("class", function(d){return 'path-'+Math.floor((Math.random()*10)+1))}); 

比這

$('path').each(function(){$(this).attr('class', 'path-' + Math.floor((Math.random()*10)+1))}); 

D3具有exotic but smart way of doing things，最好也做一些嚴重之前，瞭解此更新模式。

這裏是工作代碼：

w = 1200; 
h = 500; 

function ranNum(){ 
    return Math.floor((Math.random()*10)+1); 
} 


var vertices = d3.range(50).map(function(d) { return {x: d.x, y: d.y}; }); 
//console.log(vertices); 


links = []; 
voronoiVertices = []; 
var force = d3.layout.force() 
    .nodes(vertices) 
    .size([w, h]) 
    .linkDistance(60) 
    .charge(-900) 
    .on("tick", tick) 
    .start(); 


var svg = d3.select("body").append("svg") 
    .attr("width", w) 
    .attr("height", h); 


//path gradient 
var defs = svg.append('defs') 
var radialGradient = defs.append('radialGradient') 
    .attr('id', 'pathGrad') 
    .attr('cx', '50%') 
    .attr('cy', '50%') 
    .attr('r', '50%') 
    .attr('fx', '50%') 
    .attr('fy', '50%'); 

var stop1 = radialGradient.append('stop') 
    .attr('offset', '.2') 
    .attr('stop-color', '#a8a8a8'); 

var stop2 = radialGradient.append('stop') 
    .attr('offset', '1') 
    .attr('stop-color', '#0000000'); 

//path dropShadow 
var filterShadow = defs.append('filter') 
    .attr('id', 'pathShadow') 
    .attr('height', '130%'); 

var gCir = svg.append('g') 
    .attr("class", "gCircle"); 

var gPath = svg.append('g') 
    .attr("class", "gPath"); 

var circle = svg.selectAll("circle"); 
var path = gPath.selectAll("path") 
     .data(d3.geom.voronoi(vertices)) 
      .enter().append("path") 
     .attr("fill", "url(#pathGrad)"); 

     //wraps path with random class after generation 
//$('path').each(function(){$(this).attr('class', 'path-' + Math.floor((Math.random()*10)+1))}); 

var clip = defs.append("svg:clipPath") 
    .attr("id", "clip") 
     .append("svg:rect") 
     .attr("id", "clip-rect") 
     .attr("x", "0") 
     .attr("y", "0") 
     .attr("width", '900px') 
     .attr("height", '900px'); 

var gClip = svg.append("svg:g") 
    .attr('clip-path', 'url(#clip)'); 


function tick() { 
    voronoiVertices = vertices.map(function(t){return [t.x, t.y]}) 
    path = path.data(d3.geom.voronoi(voronoiVertices)) 
     path.enter().append("path") 
     .attr("d", function(t) { return "M" + t.join("L") + "Z"; }); 
    path.attr("fill", "url(#pathGrad)") 
     .attr("d", function(t) { return "M" + t.join("L") + "Z"; });   

    circle = circle.data(vertices) 
    circle.enter().append("circle") 
     .call(force.drag) 
     .attr("r", 0) 
     .attr('class', function(d) { return d.index; }) 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }) 
     .transition().duration(5000).attr("r", 5); 

     circle.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
} 

祝你好運！