1

我正在根据强制布局中的某些点生成 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; });
    }


});
4

1 回答 1

0

这里有 jQuery 和 D3 的奇怪组合。使用 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 有一种奇特但聪明的做事方式，最好在做一些严肃的事情之前好好学习这种更新模式。

这是工作代码：

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; });
}

祝你好运！

于 2015-06-09T15:57:12.107 回答